app.directive('appView', ['appService',function($scope) {
return {
restrict : '',
template : '',
templateUrl : 'app/app.html',
controller : function($scope,docsService){
},
compile : function(tElement, tAttrs, transclude){
tElement.bind('click', function() {
console.log("In compile");
//Update DOM element
});
},
//or
/*
link : function(scope, element, attrs) {
element.bind('click', function() {
console.log("In link");
//Update DOM element.
});
},*/
};
}]);
我正在研究AngularJS,发现编译和链接不能一起工作,
现在,要操作DOM并监听事件,使用链接还是编译,最佳实践是什么?为什么选择一个而不是另一个呢?链接有一个范围属性,我想可以更灵活。
From Angular docs on $compile
:
编译函数处理模板DOM的转换。因为大多数指令不做模板转换,所以它不常被使用。需要编译函数的例子是转换模板DOM的指令,比如ngRepeat,或者异步加载内容的指令,比如ngView。
:
link函数负责注册DOM侦听器以及更新DOM。该命令在模板克隆完成后执行。这是大部分指令逻辑将被放置的地方。
所以在大多数情况下link
函数是充分的。如果需要,您可以添加侦听器并操作DOM。compile
函数对于更"极端"是必需的。例如ng-repeat
。(从我使用Angular 14个月的经验来看,我只使用过一次compile
。)
顺便说一下(同样来自文档):
编译函数可以有一个返回值,该返回值可以是函数也可以是对象。
返回一个(链接后)函数——相当于在编译函数为空时通过配置对象的link属性注册链接函数。
返回一个带有通过pre和post属性注册的函数的对象-允许您控制在链接阶段何时应该调用链接函数。请参阅下面的预链接和后链接函数的信息。