如何在页面的任何位置隐藏div?

时间:2015-07-20 06:47:10

标签: angularjs

好的我有主头控制器,我有这个:

<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吗?

2 个答案:

答案 0 :(得分:1)

单独使用ng-hide,而不是在ng-class内使用<div class="fade-show-hide" ng-hide="loggedInClose" ng-show="loggedInOpened" ng-cloak> 。所以将HTML更改为:

$scope.$apply();

我认为您的更改未得到应用:

$scope.loggedInClose = true;

之后使用{{1}}

请参阅plunkr&#34; http://plnkr.co/edit/0u7u4InJsJpI4g4E8vvg?p=preview&#34;

答案 1 :(得分:1)

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

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