Custom directive to detect out side the button click

Question

I need to write a custom directive to close (or hide) the button when click out side the button (empty area of the DOM). In other words anywhere except within the button ? This behaviour should be applied only for this button when I apply the custom directive.Any guide would be highly appreciated.

 <button class="btn btn-primary" ng-click="CreateUpdate()">Submit</button>

app.directive('MyDirective', function() {
       //content
});

Any guide? What have you tried that didn't work? I am sure you are aware that questions on StackOverflow are not supposed to be requests for code? — Patrick, Apr 17 '15 at 07:03
@Patrick Problem which I have is where I don't know how to approach this ? — Sampath, Apr 17 '15 at 07:06
Are you supposed to be able to click on other things as well, or is "a click outside" only supposed to hide the button and nothing else? — Patrick, Apr 17 '15 at 07:07
You *can* solve this by using an overlay with fixed position at (0,0) and width, height set to 100%; if you click that, you hide the button. — Patrick, Apr 17 '15 at 07:08
@Patrick click anywhere on the DOM. Definitely not an other buttons or like that ? Just a empty area ? — Sampath, Apr 17 '15 at 07:09
Depending on your HTML, you can probably solve this in css as well, using the :focus-selector — Patrick, Apr 17 '15 at 07:09
So you're not *allowed* to click on other buttons, but everything else should have a click event handler that hides the button? — Patrick, Apr 17 '15 at 07:10
@Patrick I would like to go with the directive hence I can use it again some where else. — Sampath, Apr 17 '15 at 07:10
@Patrick There is no such restriction.I just need to hide the button when it clicks empty space on the DOM. — Sampath, Apr 17 '15 at 07:12
I understand that, but there's details missing as to how you would solve this. It would be easier to help you if you narrow down the details, otherwise you might get answers that are "correct" but you would consider them incorrect because they don't do exactly what you want — Patrick, Apr 17 '15 at 07:12
Then my follow-up question is; what do you define as empty space in the DOM? Would an overlay with a click-handler solve your problem? — Patrick, Apr 17 '15 at 07:17
And also, if you click another button, what is supposed to happen? Should the button not be hidden in that case? — Patrick, Apr 17 '15 at 07:18
@Patrick When I apply my custom directive to that button,it should work as I mentioned above. — Sampath, Apr 17 '15 at 07:21
It's javascript related. Tons of people have already answered similar questions. E.g: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — Yoggi, Apr 17 '15 at 08:21
@Yoggi I'm not using jquery.I need to write an angular directive for that functionality. — Sampath, Apr 17 '15 at 08:25
However, angular uses jqLite if you haven't included Jquery in your project. Also, there are plenty of plain javascript solutions out there. As I sad, this is not a angular related issue. — Yoggi, Apr 17 '15 at 08:31
@Yoggi I have written an angular directive.I'll update here later. — Sampath, Apr 17 '15 at 08:44

score 0 · Answer 1 · answered Apr 17 '15 at 12:09

Within the button directive you can inject $document. Then wire up on click on the document.

<button class="myButton btn btn-primary" ng--lick="CreateUpdate()">Submit</button>

mainModule.directive("myButton", ['$document',
    function ($document) {
         return {
             restrict: "E",
             link: function (scope, element, attrs) {
                       $document.bind('click', function(event){
                       //Get the element clicked
                       var clickedElement = angular.element(event.target);
                       // If the clickedElement is not same as button (say, the clicked element class is different from button class) then close the button.
                   }
                }
           })

Custom directive to detect out side the button click

1 Answers1