http://codepen.io/whb/pen/wzjWYv
初始化的時候,可以走到link函數中將原始資料處理之後再做顯示
當點擊刷新之後
實在無法理解 當ng-repeat中資料刷新之後 嵌套的directive未執行link函數,跪求各位大神指導
程式碼如下:
(function() {
'use strict';
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.list = [{
name: "张三",
age: 23
}, {
name: "李四",
age: 63
}];
//刷新按钮
$scope.load = function() {
$scope.list = [{
name: "张三1",
age: 23
}, {
name: "李四1",
age: 63
}];
};
});
app.directive('item', function() {
return {
restrict: 'A',
template: "<p>姓名:</p> <p>{{ item.name }}</p> <p>昵称:</p> <p>{{ item.nickName }}</p> <p>年龄:</p> <p>{{item.age}}</p>",
scope: {
item: "=",
},
link: function(scope, element, attrs) {
scope.item.nickName = scope.item.name + "nick";
console.log(scope.item);
}
}
});
})();
<p ng-app="plunker">
<p ng-controller="MainCtrl" style="text-align: center;">
<p >
<p ng-repeat="item in list track by $index" class="items-warp">
<p item="item" class="row"></p>
</p>
</p>
<button ng-click="load()">刷新 </button>
</p>
</p>
我說一下我的觀點,但不一定正確。
原因應該是你在ng-repeat上的 track by 語法造成的.
官方文檔中說ngRepeat是根據$watchCollection檢測相應的viewModel是不是改變過,增加了track by 後相當於對這個檢測機製附加了新的條件,當你第二次點擊刷新的時候,ngRepeat根據track by的條件得到的判斷其實是不需要重新渲染Dom的,所以就不會再compile你定義的指令,而link方法是在compile之後才會呼叫的,所以無法呼叫到link方法。
compile 和 link 的分析:傳送門