How to detect a click and manipulate element in my case

Question

I am trying to detect a document click when user clicks anywhere in the page . I also want to prevent clicking a div to trigger the document clicks.

I have something like

//Directive for page click
angular.module('myApp').directive('documentClick', ['$rootScope',
    function($rootScope) {
        return function(scope, element, attrs) {
            element.bind('click', function(e){
                $rootScope.$broadcast('pageClick');
            })
        }
}]);

controller JS

  //within a controller
  $scope.toggleDiv = function() {
      $scope.openDiv = !$scope.OpenDiv;
   }

  $scope.$on('pageClick', function($event) {
            $scope.openDiv = false;
  })

html 
  <body document-click>
      <div ng-controller = 'ctrl'>
          <div id='testDiv'>
               <div id='childDiv' ng-click="toggleDiv()">
                    toggle div here
               </div>
           </div>
      </div>
  </body>

I don't want to trigger $scoep.openDiv = false when I click ' childDiv '. I only want to trigger $scope.openDiv = false when I click anywhere in the page.

Is there an angular way to do this?

Thanks!

Answer 1

You could pass down the event e and check the target.id :

$rootScope.$broadcast('pageClick', e);

$scope.$on('pageClick', function($event, e) {
    if(e.target.id !== 'childDiv')
        $scope.openDiv = false;
})

How to detect a click and manipulate element in my case

Question

1 answers

solution1
0 ACCPTED 2014-09-25 00:09:54

How to detect a click and manipulate element in my case

Question

1 answers

solution1 0 ACCPTED 2014-09-25 00:09:54

solution1
0 ACCPTED 2014-09-25 00:09:54