ng-repeat嵌套的directive link函数未执行

发布于 2022-09-04 00:10:26 字数 1825 浏览 23 评论 0

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

初始化的时候,可以走到link函数中将原数据处理之后再做显示
clipboard.png

当点击刷新之后
clipboard.png

实在无法理解 当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: "<div>姓名:</div>  <div>{{ item.name }}</div>  <div>昵称:</div>  <div>{{ item.nickName }}</div>  <div>年龄:</div>  <div>{{item.age}}</div>",
      scope: {
        item: "=",
      },
      link: function(scope, element, attrs) {
        scope.item.nickName = scope.item.name + "nick";
        console.log(scope.item);
      }
    }
  });
})();
<div ng-app="plunker">
  <div ng-controller="MainCtrl"  style="text-align: center;">
    <div >
      <div ng-repeat="item in list track by $index" class="items-warp">
        <div item="item" class="row"></div>
      </div>
    </div>
    <button ng-click="load()">刷新 </button>
  </div>
</div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

阪姬 2022-09-11 00:10:26

我说一下我的观点,但不一定正确。

原因应该是你在ng-repeat上的 track by 语法造成的.

官方文档中说ngRepeat是根据$watchCollection检测相应的viewModel是不是改变过,增加了track by 后相当于对这个检测机制附加了新的条件,当你第二次点击刷新的时候,ngRepeat根据track by的条件得到的判断其实是不需要重新渲染Dom的,所以就不会再次compile你定义的指令,而link方法是在compile之后才会调用的,所以无法调用到link方法。

compile 和 link 的分析:传送门

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文