如何防止子控制器中 div 上的 ng-click 事件触发根中的 ng-click？答案

【问题标题】：How to prevent a ng-click event on a div in a sub controller from triggering an ng-click in the root?如何防止子控制器中 div 上的 ng-click 事件触发根中的 ng-click？
【发布时间】：2015-05-21 00:36:38
【问题描述】：

http://plnkr.co/edit/gB7MtVOOHH0FBJYa6P8t?p=preview

我上面有一个父子控制器示例，在子中单击按钮时，我会显示 div showPop，然后将 $emit 一个事件向上传递到 $rootScope。

现在在父/$rootScope我“听到”那个事件然后激活另一个功能。

$rootScope 中的那个函数会触发 bodyClick 的点击函数处于活动状态，因此一旦在 body/parent/rootScope 中注册了一次点击，div showPop 现在就被隐藏了。

问题是，虽然我希望点击 body 以关闭该 div，但我不希望点击实际 div 本身来触发它关闭？

我怎样才能完成这个/解决$rootScope ng-click 事件？

.controller('mainController', ['$scope', '$rootScope',
                              function($scope,$rootScope) {

  var unbind = $rootScope.$on('popoverOpen');

  $scope.$on('popoverOpen', function(events, data) {
    console.log('popoverOpen is heard!')
    $scope.bodyClick = function() {
        console.log('bodyClick sent down from main');
        $scope.theAction = 'bodyClick sent down from main';
        $rootScope.$broadcast('bodyClick');
    };

    $scope.$on('$destroy', unbind);
  });
}])

.controller('subController', ['$scope', '$rootScope',
                             function($scope, $rootScope) {

  $scope.callPop = function($event) {
    $rootScope.theAction = 'popoverOpen emitted up from sub';
    $event.stopPropagation();
    $scope.showPop = true;
    $scope.$emit('popoverOpen');
  };

  $scope.$on('bodyClick', function() {

    console.log('bodyClick received in sub!');
    $rootScope.theAction = 'bodyClick received in sub!';
    $scope.showPop = false;
    $scope.$emit('destroy');
  });
}]);

标记：

<body ng-app="app" ng-controller="mainController" ng-click="bodyClick()">

<h1>mainController</h1>

<div class="sidebar" ng-controller="subController">
  <h2>subController</h2>
  <button ng-click="callPop($event)">Click Me</button>

  <div ng-show="showPop" class="pop-box">This is showPop, clicking in here should not close it, clicking outside should!</div>
</div>

<section class="the-section">
  {{theAction}}
</section>

</body>

【问题讨论】：

如果您不想点击正文。你为什么不尝试一些有覆盖的东西？单击覆盖会关闭弹出窗口并阻止单击继续？
stackoverflow.com/questions/20300866/…
@Okazari 啊真的！所以我想嗯......是的，我可以在我所有的弹出框下有另一个指令元素来处理这个......哈哈，我想我让事情变得太难了。
@DRobinson 我现在正在使用停止传播，它也可以防止对子的单击也充当对主体的单击。问题是在事件被激活后，对 body 的点击现在总是在 sub 之前首先被注册。
@Okazari：点击叠加层

标签： javascript angularjs angularjs-scope angularjs-ng-click

【解决方案1】：

您可以尝试使用叠加层。单击覆盖关闭弹出窗口，并阻止单击继续。

很高兴这个建议对你有所帮助。

【讨论】：