http://plnkr.co/edit/gB7MtVOOHH0FBJYa6P8t?p=preview
The example above demonstrates a parent-child controller setup. In the child controller, when a button is clicked, it displays the div showPop and emits an event to the $rootScope.
Upon receiving this event in the parent / $rootScope, another function is activated.
This function in the $rootScope triggers the click function bodyClick, which hides the div showPop when a click is registered on the body/parent/rootScope element.
The challenge here is that while clicks on the body should close the div, clicks directly on the div itself should not trigger its closure.
How can we achieve this and circumvent the ng-click event of $rootScope?
.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');
});
}]);
Markup:
<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>