Angularjs get event when we click anywhere on page?

Question

Hi I am developing SPA using angularjs . I have one dropdown. If the user logs in then dropdown will be clickable and it expands various options like profile,logout etc. In app.js i have below code to expand dropdown

  if (cookieloginid != null) {
            var id = document.getElementById('ProfileDropdown');
    id.innerHTML = $scope.ProfileDropdown = '<div data-drop-down>' + ' <ul>' +
        '<li><a href="#/userProfile">User Profile</a></li>' +
        '<li>test1</li>' +
       ' <li onclick="logout(event)">logout</li>' +
    '</ul>'+'</div>'; 
        }

Above code works fine. If i click on dropdown that will expand and not close. After clicking on dropdown if i click anywhere on web page i want to close the expanded dropdown. May i know is this possible? Any help would be appreciated. Thank you.

did you try: angular.element('#ProfileDropdown').triggerHandler('Click') on page load — Tejinder Singh
– Tejinder Singh, Commented Jul 14, 2017 at 10:10
You can use event.stopPropagation(); though it is not recommended — Vivz
– Vivz, Commented Jul 14, 2017 at 10:12
Thank you...... I am developing single page application. Where should i put above set of code? — Niranjan Godbole
– Niranjan Godbole, Commented Jul 14, 2017 at 11:27

sumit chauhan · Accepted Answer · 2017-07-14 10:10:33Z

1

you can do this by creating a custom directory for the above, see below link for the information: http://www.competa.com/blog/an-angular-click-anywhere-to-close-dropdown-menu-directive/

or else you can add your custom event on document using jquery $(document) to perform the action.

See below links: http://embed.plnkr.co/rpOgQC/

also you might want to use event.stopPropagation();, in case when you click on dropdown you might not end up in case where your drop down not getting opened.

answered Jul 14, 2017 at 10:10

sumit chauhan

1,3001 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Niranjan Godbole Over a year ago

Thank you. I can see dropDown directive in the plunker. So should i add one?

Niranjan Godbole Over a year ago

all i have confusion is i am using ui-routing. I have lot of ui-views. Where should i write directives?

sumit chauhan Over a year ago

make it global so, that you can reuse it.

Niranjan Godbole Over a year ago

Thanks. In my case no need to include clickCapture directive right?

sumit chauhan Over a year ago

No. you don't need that. It just for your understanding

|

Collectives™ on Stack Overflow

Angularjs get event when we click anywhere on page?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related