Angular.JS指令未更新

Question

我正在使用click函數更新名為$ scope.arrangement的作用域數組，但這不會導致我的指令更新和更新DOM。

/******************************************
  Sort function
******************************************/  

  $scope.sort = function() {
        $scope.arrangement.sort(function(a, b){
            var keyA = a.created,
        keyB = b.created
        // Compare the 2 dates
        if(keyA < keyB) return -1;
        if(keyA > keyB) return 1;
        return 0;
        })
        for (b=0;b<$scope.arrangement.length;b++) { 
            if($scope.arrangement[b].ord !== b) {
                console.log('order was '+$scope.arrangement[b].ord + " now " + b)
                $scope.arrangement[b].ord=b;
            }
        }
    }
})

/******************************************
  Directives
******************************************/

app.directive('item', function() {
  return {
    restrict: 'A',
    scope: {
      count: "=",
      arrangement: "="
    },
    link: function(scope,element,attrs) {
      console.log('updated')
      for (a=0;a<scope.arrangement.length;a++) {
        if (scope.arrangement[a].ord === scope.count) {
          element.html("Item "+scope.arrangement[a].id + " Created: " + scope.arrangement[a].created)
        }
      }
    }
  }
})

這是一個小矮人： http ://plnkr.co/edit/hT0HQ85yaPkQj2JcASrY

通過單擊“排序”，我希望$ scope.sort函數可以運行，而這又將刷新我的指令。 實際發生的是$ scope.sort函數運行，但指令未更新。

請注意，我故意不在此處使用ng-repeat。

Answer 1

link功能只能運行一次。 elem.html不使用數據綁定，因此在鏈接指令時，這只會在最初設置元素的HTML。 您可以自己設置手表：

scope.$watchCollection('arrangement', function () {
  for (a=0;a<scope.arrangement.length;a++) {
    if (scope.arrangement[a].ord === scope.count) {
      element.html("Item "+scope.arrangement[a].id + " Created: " + scope.arrangement[a].created)
    }
  }
});

似乎使用內置指令會容易得多，但是：

<span ng-if="arr.ord == s.count" ng-repeat="arr in arrangement">
  Item {{arr.id}} Created: {{arr.created}}
</span>