爲什麼我的AngularJS組件不會對屬性值更改做出反應？

Question

我已經在SO和網絡上看到了關於這個主題的幾個問題。具體來說，我試圖遵循one clear example，但無法讓它在我的代碼中工作。我有一個plunker，我希望顯示我的問題;它遵循這個例子，但不起作用。

• 的組件顯示一個用於在列表中每個項目的複選框（指定爲一個屬性，應該是一個單向的結合作爲組分從不改變的值傳送到所述頁）
• 當一個和只有一個複選框被選中，它調用一個回調函數 告訴頁面XOR的位是否爲真
• 有一個「call in」函數可以清除所有的複選框。 （這是有用的，但是有點不相干，它是早期Plunker對於不同問題的遺蹟）
• 頁面上有一個添加位按鈕，它將一個項目添加到要顯示組件的位列表中
• 在要顯示的位列表中，組件控制器中有一個$watch()。現在它只是記錄它被調用，但更接近我最終目標的是確保新的複選框最初被設置而不是被清除。

$watch()在頁面加載（創建組件）時觸發。但是，當我單擊按鈕並添加一點時，創建複選框的ng-repeat會觸發，但$watch()不會。

Answer 1

使用手錶收藏。閱讀關於它here。適用於您的plunkr該解決方案將是本

$scope.$watchCollection(
 
     "vm.myBits", 
 
     function(newValue, oldValue) { 
 
     console.log("a. new bit"); 
 
    });

An update version of your plunk

您還可以使用「深」對象加入「真實」的第三個參數表檢查。然而，這是非常 「昂貴」，而不是推薦一次watchCollection在1.2.x版本推出

$scope.$watch(
 
     "vm.myBits", 
 
     function(newValue, oldValue) { 
 
     console.log("a. new bit"); 
 
    },true); // The TRUE is a deep checking and also works but is "expensive"