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

angularjs hide show-hide
Lara picture Lara · Nov 11, 2013 · Viewed 13.7k times · Source

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

Answer

user3044147 picture user3044147 · Nov 30, 2013

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

Related questions

Show and hide table rows in angularjs

First, I would like to show all id named "main rows and hide all id named "review" rows. Second, when I click on one "main row, I would like to show one "review" row under this "main row. Third step, …

Read More
if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More
How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful. What I don't understand specifically: Are they connected to the DOM? How can I update DOM changes to the model? What is the connection …

Read More