重复的编译和链接功能

我试图理解编译和链接函数的区别。 它说在编译器的角度文档中

一些指令如ng-为集合中的每个项目重复一次克隆DOM元素。 编译和链接阶段提高了性能,因为克隆模板只需编译一次,然后为每个克隆实例链接一次。

我查看了源代码,试图理解它是如何工作的,而我不知道它如何为每个克隆实例创建单独的链接函数。 对我来说,它看起来像编译函数返回一个ng-repeat指令的链接函数。 这个链接函数确实为ng-repeat中的每个元素创建了一个新的作用域,但是并没有给每个克隆实例一个单独的链接函数。


有一件事可以让他们的描述感到困惑,他们试图在<ng-repeat>中讨论指令的概念,而不是讨论<ng-repeat>本身。

这个想法是,即使你有一个特定指令的多个实例(例如因为它们在一个<ng-repeat> ),编译函数在你的应用程序的整个生命周期中只执行一次。 因此,将代码放在这里的性能好处是它只能运行一次。 这也是潜在的问题。 编译函数中唯一需要做的事情就是该指令的所有实例都是通用的。

另一方面,链接函数对于该指令的每个实例都会执行一次(例如,在<ng-repeat> )。

因此,您可以将编译函数看作设置此类型指令的模板,而链接函数设置该指令的实际实例。 这就是为什么链接函数得到一个$范围传递给它,并且编译没有,以及为什么链接函数是更常用的。

有关Angular的一位作者对此的详细讨论,请查看:http://www.youtube.com/watch?v=WqmeI5fZcho&list=TLwY_LmqLDXW_3QKhTNm1zKa9j40TvPO2O(13:42是Misko地址链接与编译功能的区别)


除了KayakDave的回答,这里是一个ng-repeat的简单实现,它不会执行任何收集观察。 这位笨蛋的日志记录显示了事件的顺序,甚至有一些例子显示了优先级如何工作。

Plunker

链接到源问题

使用Javascript:

app.directive('fakeRepeat', function() {
  return {
    priority: 1000,
    terminal: true,
    transclude: 'element',
    compile: function(el, attr, linker) {
      return function(scope, $element, $attr) {
        angular.forEach(scope.$eval($attr.fakeRepeat).reverse(), function(x) {
          var child = scope.$new();
          child[attr.binding] = x;
          linker(child, function(clone) {
            $element.after(clone);
          });
        });
      }
    }
  }
});
链接地址: http://www.djcxy.com/p/77915.html

上一篇: repeat's compile and link functions

下一篇: Angular directive with default options