我有一个指令,我在页面上多次使用。它在状态改变时触发事件,然后控制器处理事件。
问题是该事件被触发两次。我知道为什么会发生这种情况,但我要么试图找到解决方法或更好的设计。有什么提示吗?
答案 0 :(得分:7)
您需要定义隔离范围以使指令可重用。一个简单的解决方法是只添加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);
});
}
};
});