Directive to detect click out of an element?

Question

In Angularjs, we have the directive ngClick, which serves to perform an action when an element is clicked.

I’d like to create a directive, called ngClickout so that when the click occurs outside the element, perform an action.

How can I do that? I don’t have much "intimacy" yet with the angular.element (and I don’t want to wear jQuery).

Answer 1

The simplest method of creating a directive that gets the result you are looking for, would be to use the element.bind('click'); that will detect the click on the element.

Just one detail before demonstrating the code, it is interesting that you do not use the prefix ng, by convention, to avoid conflict with other native Angular directives. Therefore, I recommend that you use your own prefix, such as wm.

Then see a basic example of a directive to detect the click:

.directive('wmClick', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.bind('click', function(e) {
                //Execute sua função aqui
            });
        }
    }
});

<button wm-click type="button">Clique aqui</button>

With this, by clicking the button, you will call the directive event. I usually use this when I have some function common to the app whole, for example, the log out of a user. So instead of declaring a controller global just for that purpose, I create a directive.

Now, if you need to propagate some change of values, as stated in the comments, you will need to use the $scope.$digest() or $scope.$apply(), depending on whether the change is within the same directive or in global scope. See the example:

.directive('wmClick', function($scope) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.bind('click', function(e) {
                //Execute sua função aqui

                $scope.meuNome = 'Novo Nome';
                $scope.$digest(); //Para aplicar a mudança dentro da própria diretiva
                $scope.$apply(); //Para aplicar a mudança fora da diretiva
            });
        }
    }
});

---

Edited: Answering the question of the comment

In case you want to propagate an event by clicking on body to remove an element from your screen, such as a modal, for example, I would recommend the use of events allied to $document so you can even detect the use of the key ESC, take the example:

.directive('wmClick', function($document, $scope) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            //Usado para clique diretamente no elemento
            element.bind('click', function(e) {
                //Execute sua função aqui

                $scope.meuNome = 'Novo Nome';
                $scope.$digest(); //Para aplicar a mudança dentro da própria diretiva
                $scope.$apply(); //Para aplicar a mudança fora da diretiva
            });

            //Usado para detectar clique no body ou tecla "ESC"
            var close = function() {
                scope.$apply(function() {
                    scope.valor = false;
                });
            };

            $document.on('click', close); //Detecta um clic no documento e chama a função

            $document.on('keyup', function(e) { //Detecta o uso da tecla "ESC" e chama a função
                if (e.keyCode === 27) {
                    close();
                }
            });

            scope.$on('$destroy', function() {
                $document.off('click', close);
                $document.off('keyup', close);
            });
        }
    }
});