Geek Answers Handbook

How to hide a click anywhere on the page?

I have a 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 the script, I have this:

$ scope.loggedInClose = false;

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

The problem is that when I use this code, nothing happens ... I get $scope.loggedInClose = true; but div does not hide ...

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

Can someone explain to me how to hide a div if I click on any page?

+6
source share
2 answers

I hope you included this event listener in the directive, and not in the controller? :) In any case, you need to contact Angular to update the bindings to the regions. For this method, call $ apply to start a new digest:

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

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

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

I think your changes do not apply:

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

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

0
source

More articles:


All Articles