在AngularJS中监听事件和操作DOM(编译、链接)的地方

Where to listen for events and manipulate DOM(compile, link) in AngularJS?

本文关键字：链接 编译 DOM AngularJS 监听 事件 操作      更新时间：2023-09-26
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属性注册的函数的对象-允许您控制在链接阶段何时应该调用链接函数。请参阅下面的预链接和后链接函数的信息。

相关文章：