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

Question

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

所以我找到了this here .

这里是相关的部分:

['$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});
          });
        });
      };
    }
  };
}];

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

但在这里我有疑问。为什么有 2 个不同的 $element 和 element，在什么情况下这两个会有所不同？为什么要使用 compile 方法，如果你可以使用 link？如果可以 $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 方法的优点/区别是什么？

Answer 1

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

complie 函数返回一个链接函数——否则就没有使用预编译信息的可能性。在链接函数中，事件绑定(bind)到 DOM 元素。请记住，这可能是原始 DOM 元素的克隆。例如我们有 $element 和 element。第二个最终是 $element 的克隆。

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