javascript - AngularJS でスコープが変更されたときにディレクティブを再適用する方法

Question

次のようなものがあるとします。

<div mydirective>
  {{boundtoscope}}
</div>

そして、$scope.boundtoscope の変更時に mydirective を適用したいとします。Angular にディレクティブを再適用するように指示するにはどうすればよいですか?

Answer 1

ディレクティブのリンク関数で、スコーププロパティを$watchします。

myApp.directive('mydirective', function () {
  return {
    link: function (scope, element, attrs) {
      scope.$watch('boundtoscope', function(newValue) {
          alert('boundtoscope changed');
          // do something here
      });
    }
  }
});

boundtoscopeが配列またはオブジェクトマップであり、配列/オブジェクト内のアイテムへの変更を検索する場合は、objectEquality引数を設定して、「true浅い」監視を実行します（つまり、参照ではなく配列/オブジェクトの同等性を比較します） ）：：

  scope.$watch('boundtoscope', function(newValue) {
      alert('boundtoscope changed')
  }, true);    // "shallow" compare

Angular 1.2は、このための新しいメソッド$ watchCollectionを追加します：

  scope.$watchCollection('boundtoscope', function(newValue) {
      alert('boundtoscope changed')
  });  // also does a "shallow" compare