12

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

Lara
  • 301
  • 2
  • 5
  • 13

2 Answers2

6

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

user3044147
  • 1,374
  • 5
  • 14
  • 23
1

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

doodeec
  • 2,927
  • 19
  • 23