다중 지시문 인스턴스 및 이벤트

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