$compile 手动编译
生活随笔
收集整理的這篇文章主要介紹了
$compile 手动编译
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
angularjs里比較重要但又很少手動調用的要屬$compile服務了，通常在寫組件或指令時，都是angularjs自動編譯完成的，但有時我們可能需要手動編譯，比如封裝一個table組件，根據參數實現自定義渲染，增加一列復選框或者一列按鈕啥的，這是就需要用到$compile了。
例一：
<body ng-app="myApp"??ng-controller="MyController"> </body> ????<script> ????????angular.module('myApp', []) ????????????.controller('MyController', function ($scope, $compile) { //這個this是指控制器MyController ????????????????var vm = this; ????????????????vm.msg = 'hello'; ????????????????// 創建編譯函數 ????????????????var compileFn = $compile('<p>{{vm.msg}}</p>'); ????????????????// 傳入scope，得到編譯好的dom對象(已封裝為jqlite對象) ????????????????var $dom = compileFn($scope); ????????????????// 添加到文檔中 ????????????????$dom.appendTo('body'); //合起來的寫法 body.append($compile('<p>{{vm.msg}}</p>')($scope));? ? ? ? ? ?? ????????????}) ????</script> ? 通過$compile服務可以編譯html字符串或dom對象或jqLite對象，然后得到一個編譯函數，再傳入$scope，就會在當前作用域進行編譯，返回編譯好的jqLite對象，這時就可以直接添加到文檔中了（也可以先添加到文檔再編譯）。編譯的實質其實就是對dom對象解析，使dom對象與scope進行耦合，通過綁定可以實現數據的更新，像Vue其實也是一樣的過程。 例二： <body?ng-controller="MyController as appCtrl"> ????<p?use="appCtrl.html"></p> </body> ? ????<script> ????????angular.module('myApp', []) ????????????.controller('MyController', function ($scope, $compile, $timeout) { ????????????????var vm = this; ????????????????vm.html = '<h1>{{title}}</h1>\ ? ? ? ? ? ? ? ? ? ? ? ?? <ul>\ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??<li ng-repeat="item in items">{{item}}</li>\ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</ul>' ????????????}) ????????????.directive('use', function($compile) { ????????????????return { restrictive:"EA", ????????????????????scope: { ????????????????????????use: '=' ????????????????????}, ????????????????????link: function(scope, elem, attrs) { ????????????????????????scope.title = 'list'; ????????????????????????scope.items = ['list1', 'list2', 'list3']; ????????????????????????elem.html($compile(scope.use)(scope)) ????????????????????} ????????????????} ????????????}) ????</script> ?
?
轉載于:https://www.cnblogs.com/yogic/p/8297007.html
總結
以上是生活随笔為你收集整理的$compile 手动编译的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java开发求职总结
- 下一篇： CMOS图像传感器——高动态范围