Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 531
Lara Avatar asked Nov 11 '13 06:11

Lara


People also ask

How can I hide a div onclick of outside of that div angular?

You can use DOM methods such as Element. closest() or Element. contains() to check if the click target is the div or inside the div to avoid closing it when it is clicked.

What is Ng-hide used for?

The ng-hide directive hides the HTML element if the expression evaluates to true. ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none .

Which angular directive is used to hide an element?

The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide which is used to set the display to none.


1 Answers

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

like image 148
user3044147 Avatar answered Oct 31 '22 23:10

user3044147