為什么要多次編譯運行-Angular Directive
[英]Why compile running multiple times - Angular Directive
問題描述
在下面的代碼片段中，我想問一下，如果編譯階段對於指令的所有實例僅運行一次，那么為什么我看到console.log（“ compile”）運行5次？ 它應該只運行一次？ 是不是
//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編譯分為三個階段：
$ compile遍歷DOM並匹配指令。
如果編譯器發現某個元素與指令匹配，則將該指令添加到與DOM元素匹配的指令列表中。 單個元素可以匹配多個指令。
一旦識別出所有與DOM元素匹配的指令，編譯器就會按優先級對指令進行排序。
每個指令的編譯功能都將執行。 每個編譯功能都有機會修改DOM。 每個編譯函數都返回一個鏈接函數。 這些函數組成一個“組合”鏈接函數，該函數調用每個指令的返回鏈接函數。
$ compile通過調用上一步中的組合鏈接函數將模板與作用域鏈接。 反過來，這將調用各個指令的鏈接功能，在元素上注冊偵聽器，並按照每個指令的配置在作用域內設置$ watchs。
解決方案2
1 2016-12-13 14:22:13
摘自Angular文檔“什么是指令？從高層次上講，指令是DOM元素（例如屬性，元素名稱，注釋或CSS類）上的標記，它們告訴AngularJS的HTML編譯器（$ compile）將指定的行為附加到該標記上。 DOM元素（例如，通過事件偵聽器），甚至可以轉換DOM元素及其子元素。”
因此，當angular編譯html時，它將遍歷標記，並且每當找到<my-student></my-student>標記時，它將嘗試附加“特定行為”。 為了獲得特定的行為，每次指令都需要編譯指令，因為指令的每個實例可能具有不同的屬性或參數。
重新編譯$ angular指令？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.