How to detect clicks outside of scope in angularjs

Question

I have a angular controller which needs to reset whenever the user clicks outside the scope of the controller. How do I do this?

Sample 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>

I want to be able to reset ctrl2 if a click occurs outside of ctr2 when the click occurs outside of div2

ctr2 has a reset function defined inside

score 4 · Answer 1 · answered Jun 21 '13 at 15:47

If you are wanting a reset when the click happens within a sibling div, then the fact that the controllers share $scope should make that fairly straightforward. If you want to reset the div when a click happens anywhere else on the page, then you should set the "resetting" div as a directive, binding the $window object to a click handler:

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

Note that there are probably waaay better ways of handling the class/style changes than what I have set up, but the question was about click events ;).

Here's a plunk to demo

I combined your answer with http://stackoverflow.com/a/17338860/130641 for a multi-element directive solution. Thanks. — John Ledbetter, Dec 04 '13 at 17:14

score 1 · Answer 2 · answered Jun 21 '13 at 06:05

1

You can use the $rootScope to broadcast events to other controllers. See this JSFiddle: http://jsfiddle.net/simpulton/XqDxG/

answered Jun 21 '13 at 06:05

Moritz Petersen

12,902
3
38
45

So there is no way to do it from within the controller? I was thinking of using $window service. – Ranjith Ramachandra Jun 21 '13 at 06:09
[`$window`](http://docs-angularjs-org-dev.appspot.com/api/ng.$window) is just encapsulating the browser's `window` object. – Moritz Petersen Jun 21 '13 at 06:24

How to detect clicks outside of scope in angularjs

2 Answers2