Angular.JS指令不更新

我正在使用click函數更新名爲$ scope.arrangement的範圍數組，但這不會導致我的指令更新和更新DOM。Angular.JS指令不更新

/****************************************** 
    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) 
     } 
     } 
    } 
    } 
})

這裏有一個plunker：http://plnkr.co/edit/hT0HQ85yaPkQj2JcASrY

點擊「排序」，我期待的$ scope.sort功能來運行，這反過來又刷新我的指令。實際發生的是$ scope.sort函數運行，但指令不會更新。

請注意，我故意不在這裏使用ng-repeat。

來源

2014-08-27 hud

你似乎有安排和計數設置爲2路範圍綁定屬性。但是，您將它們指定爲屬性。你的意思是使用「@」範圍綁定？ – Vadim 2014-08-27 14:44:57

我認爲通過綁定他們會更新父範圍，因此觸發指令更新？你能告訴我你會改變什麼嗎？ – hud 2014-08-27 14:59:43

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>

來源

2014-08-27 15:16:56

完美！謝謝 – hud 2014-08-27 15:26:37

Angular.JS指令不更新

回答

相關問題