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

我有一个角度控制器，无论用户何时单击控制器的范围外，都需要重置。我该怎么做呢？如何检测在angularjs范围以外的点击

样本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>

我希望能够在发生的ctr2之外的点击重置CTRL 2时发生点击DIV2外

CTR2已内

来源

2013-06-21 Ranjith Ramachandra

定义的复位功能

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

来源

2013-06-21 06:05:42

所以没有办法从控制器内部做到这一点？我正在考虑使用$ window服务。 –

['$ window']（http://docs-angularjs-org-dev.appspot.com/api/ng.$window）只是封装浏览器的'window'对象。 –

非常感谢。它像魅力一样工作！ –

如果你想要一个重置，当点击发生在同级格内，那么控制器共享$scope这一事实应该是相当简单的。如果要重置div时点击发生其他地方的页面上，那么你应该设置“复位”格为指令，该$window对象绑定到单击处理：

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

注意有可能waaay处理班级/风格变化的方式比我设置的更好，但问题是关于点击事件;）。

Here's a plunk to demo

来源

2013-06-21 15:47:57 rGil

我将您的答案与http://stackoverflow.com/a/17338860/130641结合起来，提供多元素指令解决方案。谢谢。 –

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

回答

相关问题