1

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

enter image description here

I have a parent child controller example above, in the child when a button is clicked I displays the div showPop and then will $emit an event upwards to the $rootScope.

Now in the parent / $rootScope I "hear" that event then activate another function.

That function in the $rootScope triggers the bodyClick click function to be active, so once a click is registered in the body/parent/rootScope the div showPop is now hidden.

The problem is that while I want clicks on the body to close that div out, I do NOT want clicks on the actual div itself to trigger it to close?

How could I accomplish this / work around the $rootScope ng-click event?

.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>
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
  • 1
    If you don't want a click on the body. Why don't you try something with an overlay ? A click on the overlay close the pop and also prevent the click to go further ? – Okazari May 20 '15 at 16:01
  • http://stackoverflow.com/questions/20300866/angularjs-ng-click-stoppropagation – DRobinson May 20 '15 at 16:01
  • @Okazari ah true! So I guess hmm... yeah I can have another directive element under all my popovers to handle that... lol I guess I was making things too hard. – Leon Gaban May 20 '15 at 16:13
  • @DRobinson I'm using stop propagation now, it prevents the click on the sub to act as a click on the body as well. Problem is after the event has been activated, the click on the body will now always get registered first before the sub. – Leon Gaban May 20 '15 at 16:14
  • @Okazari do you want to post the answer? I don't have to try find a more complex way to do this... an overlay directive with it's own scope fixes this! – Leon Gaban May 20 '15 at 16:28
  • angular.module('app').directive('overlayEvent', function() { return { restrict: 'A', link: function(scope, el) { el.on('click', function(evt) { evt.stopPropagation(); }); } } – ngunha02 May 20 '15 at 17:17
  • I am learning custom directive and thanks to @Okazari for the guides which help me come up with the code above :D – ngunha02 May 20 '15 at 17:19
  • Wich guides helped you ? I'm proud my posts helped some people :) – Okazari May 20 '15 at 17:21
  • 1
    @Okazari: clicking on the overlay – ngunha02 May 20 '15 at 17:29

1 Answers1

1

You could try something with an overlay. A click on the overlay close the pop and also prevent the click to go further.

Glad this suggestion helped you.

Okazari
  • 4,597
  • 1
  • 15
  • 27