Javascript 为什么AngularJS默认事件指令使用“compile”方法而不是“link”来读取属性？

我怀疑如何在Angular中实现自定义事件，所以我想，“等等，为什么不检查Angular默认事件指令，比如ng click，等等”

所以我找到了

以下是相关的位：

['$parse', function($parse) {
  return {
    compile: function($element, attr) {
      var fn = $parse(attr[directiveName]);
      return function(scope, element, attr) {
        element.on(lowercase(name), function(event) {
          scope.$apply(function() {
            fn(scope, {$event:event});
          });
        });
      };
    }
  };
}];

这就是每个事件指令的声明方式。使用

编译

方法

但在这里我有我的怀疑。为什么有两个不同的

$element

和

element

，在什么情况下这两个元素会有所不同？如果可以使用

link

，为什么要使用

compile

方法？如果可以

$eval

，为什么要

$parse

我的意思是，我会做这样的事情：

function() {
  return {
    link: function(scope, element, attr) {
      element.on(lowercase(name), function(event) {
        scope.$apply(function() {
          scope.$eval(attr[directiveName], {$event: event});
        });
      };
    }
  };
};

---

Angular方法与我的方法相比有哪些优点/区别？

Angular首先编译标记，并最终创建DOM元素的克隆。例如，在ng repeat指令中会发生这种情况。在编译阶段之后，DOM元素与作用域链接。因此，在编译阶段，应该对所有实例执行相同的任务。在本例中，$parse方法对所有实例都是相等的

complie函数返回一个link函数，否则就不可能使用预编译的信息。在link函数中，事件绑定到DOM元素。请记住，这可能是原始DOM元素的克隆。e、 我们有$element和element。第二个最终是$element的克隆

---

因此，您的代码也是正确的，但是如果需要克隆，角度的代码会消耗更少的资源。例如，对于ng repeat中的元素/指令。

angular v1.0.0rc1之前，该指令看起来是这样的：

ngEventDirectives[directiveName] = valueFn(function(scope, element, attr) {
    element.bind(lowercase(name), function(event) {
      scope.$apply(attr[directiveName]);
      event.stopPropagation();
  });
});

此提交是angular v1.0.0rc1的一部分

此提交是angular v1.2.0的一部分

---

正如您所看到的，angular.js人员的想法与您完全相同，但最终他们不得不进行一些小的优化，这都是为了提高效率。

Small plunker显示了这种行为：这提供了有关链接、编译和角函数组织控制器的有用信息：