Несколько экземпляров и событий директивы

Question

У меня есть директива, которую я использую несколько раз на странице. Он запускает событие, когда состояние изменяется, и контроллер затем обрабатывает событие.

Проблема в том, что мероприятие запускается дважды. Я понимаю, почему это происходит, но я застрял, пытаясь найти обходной путь или лучший дизайн. Какие-нибудь советы?

Plunker пример: 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); 
     }); 
    } 
    }; 
});