Question

首先，here's the issue reproduced in Plunker。

基本上我有一个指令，它会根据ng-repeat中的某些信息插入一些元素。对于我的应用程序，我使用了一种非常类似的方法，它根据mime类型插入<img>，<video>或<audio>元素。

您会看到，当ng-repeat正在使用的数组中重新排序项时，传递给pageStyle指令的项目不再与新订单保持同步。它似乎保留了之前的所有内容。

app.directive('pageStyle', function () {
  return {
    restrict: 'A',
    scope: {
      pageStyle: '='
    },
    replace: true,
    link: function (scope, element, attrs) {
      var ele;
      switch (scope.pageStyle) {
        case 'bold':
          ele = angular.element('<b>bold</b>');
          break;
        case 'italics':
          ele = angular.element('<i>italics</i>');
          break;
        case 'strike':
          ele = angular.element('<strike>strikethrough</strike>');
          break;
      }
      element.append(ele);
    }
  };
});

所以我想我的主要问题是当ng-repeat中的订单发生变化时，我如何获得重新评估的指令。

Answer 1

这是因为使用了'track by'。 'track-by'导致不会完全重建dom元素，从而提高了ng-repeat渲染的性能。 http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

您的问题需要重新渲染。所以，删除'track by'。您可以通过在pageStyle范围变量上添加watch来检查问题。这将使您清楚地了解该问题。

AngularJS：ng-repeat内部的指令不尊重新订单

1 个答案: