Çoklu yönerge örnekleri ve olaylar

Question

Bir sayfada birden çok kez kullanıyorum yönergelerine sahibim. Durum değiştiğinde bir olay tetikler ve denetleyici olayı işler. Sorun, olayın iki kez ateşlenmesidir. Bunun neden olduğunu anlıyorum, ancak bir çözüm veya daha iyi bir tasarım bulmaya çalışıyorum. Herhangi bir ipucu?

Plunker örnek: http://plnkr.co/edit/xObOvi253qejphU5arFr

Answer 1

Sen yönerge yeniden kullanılabilir kılınması izole kapsamını tanımlamak gerekir. Basit bir düzeltme, her bir düğmeyi tıkladığınızda, yalnızca bir kez ateşlenerek izole bir kapsam oluşturmak için scope: {} eklemektir.

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