Detecting when a directive element has not been clicked in Angular may involve checking for certain event behaviors

Question

Detecting when a directive element has not been clicked in Angular may involve checking for certain event behaviors

I am looking to enhance the functionality of the "deselect" feature in multiple directives like buttons and popovers. Specifically, I want my functions to activate when the user clicks on an element that is not part of the directive template. Currently, I am utilizing the following JQuery code:

$('body').click(function(evt){
  if($(evt.target).closest($('#directive1')).length == 0 ){
    //deselects first directive
  }

  if($(evt.target).closest($('#directive2')).length == 0 ){
    //deselects second directive
  }

})

Is there a more efficient method to achieve this using Angular?

jquery angularjs angularjs-directive angularjs-scope angular-ui

Answer 1

Answer №1

A straightforward method that recognizes clicks outside a specified element (without using jQuery):

http://jsbin.com/wimeyoruxo/2/edit

app.directive('onDeselect', [ '$document', function($document) {

  return {
    scope: { onDeselect: '&' },
    link: function(scope, element, attrs) {

      var clickHandler = function(e) {

        // Confirm if the target is our element or its descendants
        var target = e.target;
        while (target) {
          if (element[0] === target) return;
          target = target.parentElement;
        }

        // Execute the function
        scope.$apply(function() {
          scope.onDeselect({$event:e});
        });
      };

      $document.on('click', clickHandler);

      // Remove handler upon destruction
      scope.$on('$destroy', function() {
        $document.off('click', clickHandler);
      });
    }
  };
}]);

Implementation example:

<div on-deselect="doSomething($event)"></div>

Answer 2

A straightforward method that recognizes clicks outside a specified element (without using jQuery):

http://jsbin.com/wimeyoruxo/2/edit

app.directive('onDeselect', [ '$document', function($document) {

  return {
    scope: { onDeselect: '&' },
    link: function(scope, element, attrs) {

      var clickHandler = function(e) {

        // Confirm if the target is our element or its descendants
        var target = e.target;
        while (target) {
          if (element[0] === target) return;
          target = target.parentElement;
        }

        // Execute the function
        scope.$apply(function() {
          scope.onDeselect({$event:e});
        });
      };

      $document.on('click', clickHandler);

      // Remove handler upon destruction
      scope.$on('$destroy', function() {
        $document.off('click', clickHandler);
      });
    }
  };
}]);

Implementation example:

<div on-deselect="doSomething($event)"></div>

Detecting when a directive element has not been clicked in Angular may involve checking for certain event behaviors

Answer №1

A straightforward method that recognizes clicks outside a specified element (without using jQuery):

Similar questions

CodeIgniter session automatically expires problem

Retrieving data from an Ajax POST request URL

What is the method for sending an AJAX request with a dynamically looping ID number parameter in the URL

Unusual conduct exhibited by jQuery's css() function for setting the width

Using the AngularJS double Array ng-repeat feature allows for easy iteration

Tips for integrating the AJAX response into a Sumo Select dropdown menu

It's impossible to remove a dynamically added class from a button

Unable to retrieve the value of $parent in the ng-included controller

I possess a pair of UI tabs. Whenever a button located outside the tab is clicked, I am required to activate a distinct tab

"Utilizing jQuery to apply a class based on the attributes of CSS

Experiment with AngularJS and Jasmine by utilizing the stand-alone command line interface for testing

No data stored in Angular service array

absence of data returned in Ajax call for a REST endpoint

Angularjs still facing the routing issue with the hashtag symbol '#' in the URL

Convert less to CSS using the less.modifyVars() function along with Angular

Using a combination of PHP and JQuery, I noticed that adding an IF statement within the document ready function

I am looking to split an array into smaller subarrays, each containing 5 elements, and assign a distinct class to the elements within each subarray. How can I

Attempting to conceal image previews while incorporating pagination in Jquery

Can an iFrame be programmed to automatically scroll?

Change the ng-model of the initial controller when a button is clicked in a separate controller