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...
}
}
^目前确实可以检测到我是在菜单的外部还是内部单击,但是我不知道如何在打开菜单并单击外部的情况下强制菜单退回。尝试了被注释掉但出现错误的那一行。
您的Angularians将如何做?
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。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句