angular.js - ng-repeat嵌套的directive link函數(shù)未執(zhí)行
問(wèn)題描述
http://codepen.io/whb/pen/wzjWYv
初始化的時(shí)候,可以走到link函數(shù)中將原數(shù)據(jù)處理之后再做顯示
當(dāng)點(diǎn)擊刷新之后
實(shí)在無(wú)法理解 當(dāng)ng-repeat中數(shù)據(jù)刷新之后 嵌套的directive未執(zhí)行l(wèi)ink函數(shù),跪求各位大神指導(dǎo)
代碼如下:
(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>
問(wèn)題解答
回答1:我說(shuō)一下我的觀點(diǎn),但不一定正確。
原因應(yīng)該是你在ng-repeat上的 track by 語(yǔ)法造成的.
官方文檔中說(shuō)ngRepeat是根據(jù)$watchCollection檢測(cè)相應(yīng)的viewModel是不是改變過(guò),增加了track by 后相當(dāng)于對(duì)這個(gè)檢測(cè)機(jī)制附加了新的條件,當(dāng)你第二次點(diǎn)擊刷新的時(shí)候,ngRepeat根據(jù)track by的條件得到的判斷其實(shí)是不需要重新渲染Dom的,所以就不會(huì)再次compile你定義的指令,而link方法是在compile之后才會(huì)調(diào)用的,所以無(wú)法調(diào)用到link方法。
compile 和 link 的分析:傳送門
相關(guān)文章:
1. mysql - jdbc的問(wèn)題2. 視頻文件不能播放,怎么辦?3. mysql - 把一個(gè)表中的數(shù)據(jù)count更新到另一個(gè)表里?4. mysql - 如何減少使用或者不用LEFT JOIN查詢?5. mysql - 分庫(kù)分表、分區(qū)、讀寫分離 這些都是用在什么場(chǎng)景下 ,會(huì)帶來(lái)哪些效率或者其他方面的好處6. javascript - 微信網(wǎng)頁(yè)開發(fā)從菜單進(jìn)入頁(yè)面后,按返回鍵沒(méi)有關(guān)閉瀏覽器而是刷新當(dāng)前頁(yè)面,求解決?7. node.js - nodejs開發(fā)中常用的連接mysql的庫(kù)8. mysql replace 死鎖9. 老師您的微信號(hào)是多少?10. mysql - 字符串根據(jù)字典替換
