Istanze ed eventi con più direttive

Question

Ho una direttiva che uso più volte su una pagina. Spara un evento quando lo stato cambia e il controller gestisce l'evento.

Il problema è che l'evento viene generato due volte. Capisco perché succede, ma sono bloccato o cercando di trovare una soluzione alternativa o migliore. Qualche consiglio?

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

Answer 1

è necessario definire la portata isolata per rendere la direttiva riutilizzabile. Una semplice soluzione consiste nell'aggiungere semplicemente scope: {} per creare un ambito isolato, quindi quando fai clic su ciascun pulsante, si attiva solo una volta.

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