angularjs - 複数のディレクティブ インスタンスとイベント

Question

ページで複数回使用するディレクティブがあります。状態が変化するとイベントが発生し、コントローラーがイベントを処理します。

問題は、イベントが 2 回発生することです。なぜこれが起こるのかわかりましたが、回避策またはより良い設計を見つけようとして行き詰まっています。任意のヒント？

プランカーの例: http://plnkr.co/edit/xObOvi253qejphU5arFr

Answer 1

ディレクティブを再利用可能にするには、分離スコープを定義する必要があります。簡単な修正はscope: {}、孤立したスコープを作成するために追加するだけで、各ボタンをクリックしたときに一度だけ起動することです。

app.directive('myDirective', function () {
  return {
    restrict: 'E',
    scope: {},  // Add this line to create an isolated scope
    template: '<div>Foo: {{foo}}</div><button ng-click="incrementFoo()">Increment Foo</button>',
    controller: function ($scope) {
      $scope.foo = 0;
      $scope.incrementFoo = function () {
        $scope.foo += 1;
      };

      $scope.$watch('foo', function () {
        $scope.$emit('fooChanged', {foo: $scope.foo});
        console.log($scope);
      });
    }
  };
});