CODEWITHSUNDEEP
angularjshideshow-hide
Lara
Lara

Reputation: 301

AngularJS - How to hide a div when clicking outside of it

I have an angularjs application which use to open and hide a hidden div.

Here is a jsfiddle with a sample - jsfiddle

$scope.openLogin = function(){
    $scope.userLogin = true;
};
 $scope.hideLoginContainer = function(){
    $scope.userLogin = false;
};

When I click on the "Click Here" link it will show the user login div, so I need to hide this div when I click outside. The issue I am facing here is even i click inside the user login div it will hide.

any one know of any good ideas? Thanks

Upvotes: 12

Views: 14037

Answers (2)

user3044147
user3044147

Reputation: 1414

It should be worked, just edit: <div hide-login="hideLoginContainer()" class="loginBox" ng-show="userLogin" style="display:none;" >

Upvotes: 6

doodeec
doodeec

Reputation: 2927

You can check originalTarget, or srcElement in $document.bind('click') event handler and if it will match loginBox element, then you don't hide it.

Edit: I just realized... you have to use stopPropagation() also on loginBox element, it should be enough to fix hiding when you click inside the login box

Upvotes: 1

Related Questions