angular.js - ng-repeat nested directive link function not executed
怪我咯
怪我咯 2017-05-15 17:07:38
0
1
574

http://codepen.io/whb/pen/wzjWYv

During initialization, you can go to the link function to process the original data before displaying it

After clicking refresh

I really can’t understand that after the data in ng-repeat is refreshed, the nested directive does not execute the link function. I beg you for guidance

The code is as follows:

(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>
怪我咯
怪我咯

走同样的路,发现不同的人生

reply all(1)
为情所困

I will tell you my opinion, but it may not be correct.

The reason should be caused by your track by syntax on ng-repeat.

The official documentation says that ngRepeat detects whether the corresponding viewModel has changed based on $watchCollection. Adding track by is equivalent to attaching new conditions to this detection mechanism. When you click refresh for the second time, ngRepeat detects whether the corresponding viewModel has changed based on track by. The judgment obtained from the conditions actually does not require re-rendering the Dom, so the instructions you define will not be compiled again. The link method is only called after compile, so the link method cannot be called.

Analysis of compile and link: Portal

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template