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

Question

私は、ページ上で複数回使用するディレクティブを持っています。状態が変わるとイベントが発生し、コントローラがそのイベントを処理します。

問題は、イベントが2回発生することです。私はこれがなぜ起こるのかを知るが、回避策やより良いデザインを見つけようと努力している。任意のヒント？

Plunker例：http://plnkr.co/edit/xObOvi253qejphU5arFr

Answer 1

あなたはディレクティブの再利用可能なを作るために分離された範囲を定義する必要があります。単純な修正では、scope: {}を追加して隔離されたスコープを作成するので、各ボタンをクリックすると1回だけ実行されます。

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); 
     }); 
    } 
    }; 
});