AngularJS自定義指令與多選

比方說，我有2個指令：「家長」（即表）和「孩子」（TR），我想是能夠選擇的子元素，並一直在我父母指導他們的名單（我認爲管制員是唯一可能的地方，不是嗎？）。我處理click事件，以更新存儲在我的控制器列表，它工作正常，但我也想保持「選擇」類選擇的項目，但由於選擇還可以通過父指令的控制器來改變（並修改控制器中的DOM是「禁止」），我能想到的唯一可能性是我的子指令中的一個觀察者。AngularJS自定義指令與多選

看一看的例子，請：

angular.module('App') 
    .directive('parent', function() { 
    return { 
     scope : {}, 
     controller: function($scope) { 
      this.selectedItems = []; 
     } 
    } 
}).directive('child', function() { 
    return { 
     require: '^parent', 
     link: function(scope, element, attrs, controller) { 
      scope.$watchCollection('controller.selectedItems', function() { 
       //add or remove 'selected' class here. 
      } 
     } 
    } 
});

這不起作用（觀察者事件觸發只有當數組引用的變化，而不是單個元素）進行設計，它似乎並不正確的，你能否提供一個更好的方法來解決這個問題？

更新：

注意controller.selectedItems在控制器修改，但是孩子的指令似乎並不看任何改變。

來源

2015-10-19 Andrzej Czerwoniec

根據您的反饋添加了固定的解決方案。 – morels

請參見： How to deep watch an array in angularjs?

您應該使用$表並設定$第三個可選的參數看爲true。

 scope.$watch(function(){ 
      return controller.selectedItems; 
      }, 
      function() { 
      //add or remove 'selected' class here. 
      }, 
      true 
     );

更新：

好了，你也應該通知所有的應用程序的外部觀察家認爲修改已經發生了。在AngularJS中，如果一個變量被控制器修改，但在其他地方觀察，並且如果沒有$ digest或$ apply，那麼觀察者沒有看到任何改變。所以問題不在於觀察者的選擇，而在於缺少$ apply命令。

只需添加：

$scope.$apply();

在控制器陣列的變更後。

來源

2015-10-19 13:06:10 morels

角度提供了$ watchCollection針對所以我覺得我不應該使用深的手錶，它不工作，要麼 - 它仍然只觸發時，信號的變化 –

什麼是selectedItems的內容？是一組簡單的值或對象嗎？在第二種情況下，你需要深入觀察它。無論如何，我用'function（）{return} controller.selectedItems; }'因爲通常給'controller.selectedItems'不起作用。 – morels

這是對象數組，但我不想知道有關單個對象的更改，但是想知道數組中的更改 - 刪除/添加的項目。因此，例如，每當新項目被添加到這個數組我想觸發事件。 –

我與調用$範圍固定它。修改控制器陣列後$申請（）。方法是由javascript事件觸發的，因此摘要循環從未運行過。

如果任何人有與上述有關的設計其他建議，請讓我知道。

來源

2015-10-19 13:48:51

顯然。如果一個變量被控制器修改，但在其他地方觀察，如果沒有$ digest或$ apply，那麼觀察者看不到任何改變。所以問題在其他地方。在你的OP中，爲了充分理解問題，錯過了代碼！ – morels

是的，的確如此。非常感謝您的幫助！ –

AngularJS自定義指令與多選

回答

相關問題