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