在 AngularJS 中在哪里监听事件和操作 DOM（编译、链接）？答案

【问题标题】：Where to listen for events and manipulate DOM(compile, link) in AngularJS?在 AngularJS 中在哪里监听事件和操作 DOM（编译、链接）？
【发布时间】：2014-03-11 11:37:18
【问题描述】：

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 并监听事件，这里的最佳实践是使用链接还是编译？为什么选择一个而不是另一个？链接有一个范围属性，我猜可以更灵活。

【问题讨论】：

取决于您的需求。 have a read at the docs.

标签： javascript angularjs

【解决方案1】：

来自 Angular docs on $compile：

compile 函数处理模板 DOM 的转换。由于大多数指令不进行模板转换，因此不经常使用。需要编译函数的示例是转换模板 DOM 的指令，例如 ngRepeat，或异步加载内容的指令，例如 ngView。

还有：

链接函数负责注册 DOM 监听器以及更新 DOM。它在模板被克隆后执行。这是放置大部分指令逻辑的地方。

所以在大多数情况下link 函数就足够了。如有必要，您可以添加侦听器并操作 DOM。 compile 函数对于更“极端”的情况是必需的，例如 ng-repeat。（根据我使用 Angular 约 14 个月的经验统计，我只使用过一次 compile。）

顺便说一下（再次来自文档）：

编译函数可以有一个返回值，可以是函数也可以是对象。

返回一个（post-link）函数——相当于编译函数为空时通过config对象的link属性注册链接函数。

返回具有通过 pre 和 post 属性注册的函数的对象 - 允许您控制在链接阶段何时应调用链接函数。请参阅下面有关预链接和后链接功能的信息。

【讨论】：