angularjs - 如何隐藏 div 单击页面上的任意位置？

Question

好的，我有主标题 Controller ，我有这个:

<div class="fade-show-hide" ng-class="{'ng-hide':loggedInClose==true}" ng-show="loggedInOpened" ng-cloak>
@Html.Partial("~/Views/Shared/_LoggedInPartial.cshtml")
</div>

在脚本中我有这个:

$scope.loggedInClose = false;

  $scope.toggleLoggedIn = function () {
        $scope.loggedInOpened = !$scope.loggedInOpened;
        $scope.languagesOpened = false;
        $scope.loginOpened = false;  
    };

问题是当我使用此代码时没有发生任何事情...我得到 $scope.loggedInClose = true;但 div 不是隐藏...

angular.element(document).on('click', function () {

    $scope.loggedInClose = true;

});

如果我单击页面上的任何位置，有人可以解释我如何隐藏 div 吗？

Answer 1

我希望你把这个事件监听器放在指令中，而不是 Controller 中？ :) 无论如何，您需要调用 Angular 来更新范围绑定(bind)。对于这个调用 $apply 方法来启动新的摘要:

angular.element(document).on('click', function () {
    $scope.loggedInClose = true;
    $scope.$apply();
});