How to hide div clicking anywhere on page?

Question

Ok i have main header controller where i have this:

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

In script i have this:

$scope.loggedInClose = false;

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

Problem is when i use this code nothing happend...i get $scope.loggedInClose = true; but div is not hide ...

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

    $scope.loggedInClose = true;

});

Can someone explain me how to hide div if i click anywhere on page that?

Nikhil Batra · Answer 1 · 2015-07-20T07:00:50.577

1

Use ng-hide separately instead of using it inside ng-class. So change the HTML to:

<div class="fade-show-hide" ng-hide="loggedInClose" ng-show="loggedInOpened" ng-cloak>

I think your changes are not getting applied:

use $scope.$apply(); after $scope.loggedInClose = true;

See the plunkr "http://plnkr.co/edit/0u7u4InJsJpI4g4E8vvg?p=preview"

edited Jul 20 '15 at 07:00

answered Jul 20 '15 at 06:51

Nikhil Batra

3,118
14
19

i tried with ng-hide but same problem...its not want to close – None Jul 20 '15 at 06:59

score 1 · Answer 2 · answered Jul 20 '15 at 06:56

1

I hope you put this event listener in directive, not in controller? :) Anyway, you need to tel Angular to update scope bindings. For this call $apply method to kick off new digest:

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

answered Jul 20 '15 at 06:56

dfsq

191,768
25
236
258

i put it in controller...is that a problem? – None Jul 20 '15 at 06:59
Well you should not do DOM stuff in controller. Controller is only a bridge between data and view. All DOM related manipulations should be in the presentation layer. Of course, if you care about good structure and maintainable code. Check this [thread](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). In your case I would say that you need ngClick on body tag, not manual even listener. – dfsq Jul 20 '15 at 07:03
problem is that i dont have body tag because this is partial view...and page have more then one controller ... i have controller for header controller for sidebar and content... – None Jul 20 '15 at 07:18

How to hide div clicking anywhere on page?

2 Answers2

Linked