angularjs - 多个指令实例和事件

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