$compile服务会遍历DOM树并搜索它找到的所有指令,然后将所有这些指令的链接函数合并为一个单一的链接函数。
然后这个链接函数会将编译好的模版链接到$rootScope中。
他会通过检查DOM属性,注释,类以及DOM元素名称的方式查找指令。
ps
angular的事件循环被称为 $digest 循环。
$digest分为两个小型循环 $watch evalAsync
案例
angular.module('app',[])
.directive('jxBindCompiledHtml',function($compile){
return {
template:'
scope:{
rawHtml:'=jxbBindCompiledHtml'
},
link:function(scope,elem,attrs){
scope.$watch('rawHtml,function(value){
if(!value) return;
// 这边就是利用$compile 来实现 展示html 数据的。
var newElement = $compile($.parseHTML(value))(scope.$parent);
elem.contents().remove();
elem.append(newElement);
})
}
}
})
使用 $compile 可以动态的编译服务器端返回的html片段,比如html片段中还有类似 ng-click 代码的话,必须使用$compile来执行动态编译才能够将ng-click动态编译上去。
案例:
angular.module('compileExample', [], function ($compileProvider) {
// configure new 'compile' directive by passing a directive
// factory function. The factory function injects the '$compile'
$compileProvider.directive('compile', function ($compile) {
// directive factory creates a link function
return function (scope, element, attrs) {
scope.$watch(function (scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
}, function (value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
});
};
});
}).controller('GreeterController', ['$scope', function ($scope) {
$scope.name = 'Angular';
$scope.html = 'Hello ';
}]);
PS:还有需要注意的就是,对于使用了$compile之后,有的是需要执行$scope.$digest() 方法执行下脏检查的。