为什么要多次编译运行-Angular Directive
[英]Why compile running multiple times - Angular Directive
问题描述
In the following snippet, I want to ask that if compile phase runs only once for all the instances of a directive, then why am I seeing console.log("compile") run 5 times? 
在下面的代码片段中，我想问一下，如果编译阶段对于指令的所有实例仅运行一次，那么为什么我看到console.log（“ compile”）运行5次？ It should have run only once? 它应该只运行一次？ Isn't it? 是不是
//module declaration var app = angular.module('myApp',[]); //controller declaration app.controller('myCtrl',function($scope){ $scope.name = "Joseph"; }); //app declaration app.directive('myStudent',function(){ return{ template: "Hi! Dear!! {{name}}<br/>", compile: function(elem, attr){ console.log("compile"); } } });
<body ng-app="myApp" ng-controller="myCtrl"> <my-student></my-student> <my-student></my-student> <my-student></my-student> <my-student></my-student> <my-student></my-student> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> </body>
2 个解决方案
解决方案1
1 2016-12-13 13:37:54
HTML compilation happens in three phases: HTML编译分为三个阶段：
$compile traverses the DOM and matches directives.
$ compile遍历DOM并匹配指令。 If the compiler finds that an element matches a directive, then the directive is added to the list of directives that match the DOM element.
如果编译器发现某个元素与指令匹配，则将该指令添加到与DOM元素匹配的指令列表中。 A single element may match multiple directives. 单个元素可以匹配多个指令。 Once all directives matching a DOM element have been identified, the compiler sorts the directives by their priority.
一旦识别出所有与DOM元素匹配的指令，编译器就会按优先级对指令进行排序。 Each directive's compile functions are executed.
每个指令的编译功能都将执行。 Each compile function has a chance to modify the DOM. 每个编译功能都有机会修改DOM。 Each compile function returns a link function. 每个编译函数都返回一个链接函数。 These functions are composed into a "combined" link function, which invokes each directive's returned link function. 这些函数组成一个“组合”链接函数，该函数调用每个指令的返回链接函数。 $compile links the template with the scope by calling the combined linking function from the previous step.
$ compile通过调用上一步中的组合链接函数将模板与作用域链接。 This in turn will call the linking function of the individual directives, registering listeners on the elements and setting up $watchs with the scope as each directive is configured to do. 反过来，这将调用各个指令的链接功能，在元素上注册侦听器，并按照每个指令的配置在作用域内设置$ watchs。
解决方案2
1 2016-12-13 14:22:13
From Angular documentation "What are Directives? At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (eg via event listeners), or even to transform the DOM element and its children." 摘自Angular文档“什么是指令？从高层次上讲，指令是DOM元素（例如属性，元素名称，注释或CSS类）上的标记，它们告诉AngularJS的HTML编译器（$ compile）将指定的行为附加到该标记上。 DOM元素（例如，通过事件侦听器），甚至可以转换DOM元素及其子元素。”
So when angular compiles the html, it traverse through the mark up and whenever it finds <my-student></my-student> mark up it will try attaching "the specific behaviour". 因此，当angular编译html时，它将遍历标记，并且每当找到<my-student></my-student>标记时，它将尝试附加“特定行为”。 To get the specific behavior it need to compile the directive each time since each instance of directives might have different attributes or parameters. 为了获得特定的行为，每次指令都需要编译指令，因为指令的每个实例可能具有不同的属性或参数。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.