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

Question

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

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

现在在父/$rootScope我"hear"那个事件然后激活另一个功能。

$rootScope 中的那个函数会触发 bodyClick 点击函数被激活，所以一旦在 body/parent/rootScope 中注册了点击，div showPop 现已隐藏。

问题是，虽然我希望点击主体来关闭 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>

Answer 1

您可以尝试使用叠加层。单击叠加层可关闭弹出窗口并防止单击进一步。

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

如何防止子控制器中 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?

javascript

angularjs

angularjs-scope

angularjs-ng-click