Wiele instancji i zdarzeń dyrektywy

Question

Mam dyrektywę, której używam wiele razy na stronie. Wystrzeliwuje zdarzenie, gdy stan się zmienia, a kontroler następnie obsługuje zdarzenie.

Problem polega na tym, że zdarzenie jest uruchamiane dwa razy. Rozumiem, dlaczego tak się dzieje, ale utknąłem, próbując znaleźć obejście lub lepszy projekt. Jakieś wskazówki?

Plunker przykład: http://plnkr.co/edit/xObOvi253qejphU5arFr

Answer 1

Trzeba zdefiniować samodzielnie zakresu bramkę na dyrektywę wielokrotnego użytku. Prosta poprawka polega na dodaniu scope: {}, aby utworzyć izolowany zakres, więc po kliknięciu każdego przycisku uruchamiany jest tylko jeden raz.

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