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
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.
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 .
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.
It should be worked, just edit: <div hide-login="hideLoginContainer()" class="loginBox" ng-show="userLogin" style="display:none;" >
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With