Mehrere Direktive Instanzen und Ereignisse

Question

Ich habe eine Direktive, die ich mehrmals auf einer Seite verwende. Wenn der Status geändert wird, wird ein Ereignis ausgelöst, und der Controller verarbeitet das Ereignis.

Das Problem ist, dass das Ereignis zweimal ausgelöst wird. Ich verstehe, warum das passiert, aber ich stehe entweder auf der Suche nach einem Workaround oder besserem Design. Irgendwelche Tipps?

Plunker Beispiel: http://plnkr.co/edit/xObOvi253qejphU5arFr

Answer 1

Sie müssen isolierten Bereich definieren, die Richtlinie wiederverwendbar zu machen. Eine einfache Lösung besteht darin, einfach scope: {} hinzuzufügen, um einen isolierten Bereich zu erstellen. Wenn Sie also auf jede Schaltfläche klicken, wird sie nur einmal ausgelöst.

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