如何在angularjs中检测范围之外的点击

Question

我有一个角度控制器，只要用户在控制器范围之外点击，它就需要重置。我该怎么做？

示例 html：

<div id='parent'>
    <div id='1' ng-controller="ctrl1">
        <!--other things-->
    </div>

    <div id='2' ng-controller="ctrl2">
        <!--other things-->
    </div>
</div>
<div id="parent2">
        <!--other things-->
</div>

当点击发生在 div2 之外时，如果点击发生在ctr2 之外，我希望能够重置 ctrl2

ctr2内部定义了reset函数

Answer 1

如果您希望在单击发生在同级 div 中时进行重置，那么控制器共享 $scope 的事实应该会非常简单。如果您想在点击发生时重置 div页面上的任何其他位置，那么您应该将“重置”div 设置为指令，将 $window 对象绑定到点击处理程序： p>

app.directive('reset', function($window){
  return {
    template: '<div ng-class="{red: directiveToggler}">I\'m in 2' +
              ' - click me to turn red, click anywhere else to turn me normal'+
              '</div>',
  controller: function($scope){
    $scope.directiveToggler = true;
  },
  link: function(scope, element){

    var w = angular.element($window);
    w.bind('click', function(e){

      if (e.target != element[0].children[0]){
        scope.directiveToggler = false;
        scope.$apply();

      } else {
        scope.directiveToggler = true;
        scope.$apply()
      }
    })
  }
  }
})

请注意，处理类/样式更改的方法可能比我设置的更好，但问题是关于点击事件；）。

Here's a plunk to demo

Answer 2

您可以使用$rootScope 将事件广播到其他控制器。请参阅此 JSFiddle：http://jsfiddle.net/simpulton/XqDxG/