AngularJS：ng-repeat中的指令不遵守新顺序

Question

首先， 这是在Plunker中转载的问题 。

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

您会看到，当在ng-repeat使用的数组中对项目进行重新排序时，传递给pageStyle指令的项目不再与新订单保持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

这是因为使用了“跟踪依据”。 “跟踪”导致无法完全重建dom元素，因此提高了ng-repeat渲染的性能。 http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

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