AngularJSデータバインディングでディープウォッチ配列が機能しない

Question

AngularStrapのpopoverディレクティブを使用しています。私はトグルとしてレンダリングされるオブジェクトの集まりを持っています。トグルがクリックされると、スコープのデータは変更されません...私はこれを行うさまざまな方法を試しました。

これは、これはあなたがng-使用中のコレクションを見しようとしているとき、それは少し複雑になりますポップオーバー

<div class="well curves-popover" ng-controller="CurvesPopoverCtrl"> 
    <div class="row"> 
    <div ng-repeat="currency in popoverCurrencies"> 
     <div class="clearfix" ng-if="$index % 3 == 0"></div> 
     <div class="col-md-4"> 
     <div class="togglebutton"> 
      <label> 
      <span ng-class="currency.iconClass"></span> <span>{{currency.ccy}}</span> 
      <input type="checkbox" checked="currency.build"> 
      </label> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

のテンプレートであるポップオーバーのコントローラ

app.controller('CurvesPopoverCtrl', ['$scope', '$filter', 'AppData', 
    function($scope, $filter, AppData) { 
     'use strict'; 

     $scope.popoverCurrencies = AppData.getCurrencies(); 
     $scope.$watch ('popoverCurrencies', function(val) { 
      if(val !== null && val !== undefined){ // only fires when popover opens. 
       console.log("toggled", val); 
       //AppData.setCurrencies($scope.currencies); 
      } 
     }, true); // deep watch 


    } 
]); 

です繰り返す。 docsによると：

各テンプレートのインスタンスは、独自のスコープを取得します...そのため

、これらの他のスコープ内の値が更新されたときに時計が通知されません。回避策の1つは、 hereと表示されているように、ng-repeatの各繰り返しに別のコントローラをバインドすることです。しかし、別の、おそらくよりクリーンなアプローチは、 ng-changeディレクティブを使用してこれらの値の更新をインターセプトすることです。私はそれを少し説明した here。