AngularJS - 如何在外部单击时隐藏div

Question

我有一个angularjs应用程序，用于打开和隐藏隐藏的div。

这是一个带有样本的jsfiddle - jsfiddle

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

当我点击“Click Here”链接时，它会显示用户登录div，所以当我点击外面时我需要隐藏这个div。我在这里面临的问题是，即使我点击它将隐藏的用户登录div内部。

任何人都知道任何好主意吗？ 感谢

Answer 1

应该有效，只需编辑：<div hide-login="hideLoginContainer()" class="loginBox" ng-show="userLogin" style="display:none;" >

Answer 2

您可以在$document.bind('click')事件处理程序中检查originalTarget或srcElement，如果它与loginBox元素匹配，则不要隐藏它。

编辑：我刚刚意识到......你还必须在loginBox元素上使用stopPropagation()，当你在登录框内点击时，它应该足以修复隐藏