javascript - AngularJS : directive inside ng-repeat not respecting new order

Question

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

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

您将看到，当数组中的项目重新排序时，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

您的问题需要重新渲染。因此，删除“跟踪依据”。 您可以通过在 pageStyle 范围变量上添加监视来检查问题。这将使您清楚地了解问题。