如何从控制器内部手动 ng-hide 某些东西？

Question

http://plnkr.co/edit/ps8TCpQ8znYQnOExO7Er

我有一个简单的应用程序，其中有一个头像图像和一个菜单。当您单击头像图像时，我使用 ng-click、ng-class 和 ng-show 来设置菜单显示和隐藏的动画。

HTML:
<div class="avatar"
     ng-click="id_avatar_menu.getMenuClick('clicked menu')"
     ng-class="{ active: avatarMenuBool }">
     <img width="100" height="100" src="http://www.memes.at/faces/are_you_fucking_kidding_me_clean.jpg" title="avatar" alt="user avatar" />
</div>

<div ng-show="avatarMenuBool" id="avatar_menu">
  <ul>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Account</a></li>
      <li><a href="#">Logout</a></li>
  </ul>
</div>

// ANGULAR
// avatar_menu show/hide boolean
$scope.avatarMenuBool = false;

$scope.id_avatar_menu = {};
$scope.id_avatar_menu.getMenuClick = function(val) {
    $scope.avatarMenuBool = !$scope.avatarMenuBool
    console.log(" ");
    console.log(val);
    console.log("$scope.avatarMenuBool = "+$scope.avatarMenuBool);
};

现在可以了，点击头像打开和关闭菜单。但是，我还希望用户能够单击 body 或 #wrapper 上的任何其他位置并在菜单打开时关闭菜单，但如果用户单击其中的任何位置则不关闭菜单菜单。

我在控制器中添加了一些逻辑来检测菜单是否打开以及用户是在菜单内部还是外部单击。不知道如何在 Angular 中执行此操作，因此在此处使用原始 Javascript：

document.getElementById('wrapper').onclick = function(e) {

  console.log(" ");

    if(e.target != document.getElementById('avatar_menu')) {

        console.log('clicked outside');
        if ($scope.avatarMenuBool === true) {
            console.log('code to close open avatar menu here...');
            // $scope.id_avatar_menu.setAttribute("class", "ng-hide-add");
        }

    } else {
        console.log("clicked inside menu... don't close menu");
        // Don't do anything...
    }
}

^ 目前确实检测到我是在菜单外还是在菜单内单击，但我不知道如何在菜单打开时强制菜单淡出，然后我在菜单外单击。尝试了被注释掉但出错的那一行。

你们Angular人会怎么做？

Answer 1

在页面上放置 ng-click body:

<body ng-app="bitAge" ng-controller="AcctCtrl" ng-click="pageClick()">

然后把 ng-click 放在你的菜单上，传入 $event:

<div ng-show="avatarMenuBool" id="avatar_menu" ng-click="menuClick($event)">

在你的控制器中：

$scope.pageClick = function () {
    $scope.avatarMenuBool = false;
};

$scope.menuClick = function ($event) {
    $event.stopPropagation();  // stop the event from bubbling up any further
};

您还需要将 $event 传递给您的 getMenuClick() 函数并在那里停止传播。如果您不确定如何操作，请参阅更新的 plnkr。

http://plnkr.co/edit/borj3btjkMIW9oBBzfL9?p=preview

如何从控制器内部手动 ng-hide 某些东西？

How to manually ng-hide something from inside a Controller?

javascript

angularjs

angularjs-ng-click

ng-show

ng-hide