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來檢查問題。 這將使您清楚地了解問題。