在AngularJS中按任意位置时如何删除类答案

【问题标题】：How to remove class when pressing anywhere in AngularJS在AngularJS中按任意位置时如何删除类
【发布时间】：2015-11-28 21:29:08
【问题描述】：

在我正在设计的应用程序的标题中，我有 4 个这样的按钮：

<li ng-click="visible = 1" class="dropdown">
    ....
    <ul ng-class="{'visible': visible==1}" class="dropdown-menu dropdown-messages">
    ....
</li>

当用户单击一个图标（即li 元素）时，我将使ul 可见。当用户按下页面中的其他任何位置时，我需要隐藏ul。

我尝试在<body ng-click="visible = 0"> 上设置visible=0，但它不起作用。如何设置该事件？

【问题讨论】：

这个可见的必须是css类样式。在其中你必须告诉它隐藏元素。
是的，但是按下body时并没有删除类
您是否尝试过测试您的点击事件？单击正文时，尝试在 console.log() 中输出一些消息。有用吗？
是的，它不起作用。我读到的事件必须在文档上，而不是在正文中，因为正文中还有其他元素。但我不知道如何在文档而不是正文上设置事件

标签： javascript angularjs

【解决方案1】：

经过长时间的搜索，我可以制作这个指令

app.directive("outsideClick", ['$document','$parse', function( $document, $parse ){
    return {
        link: function( $scope, $element, $attributes ){
            var scopeExpression = $attributes.outsideClick,
                onDocumentClick = function(event){
                    var isChild = $element[0].contains(event.target);

                    if(!isChild) {
                        $scope.$apply(scopeExpression);
                    }
                };

            $document.on("click", onDocumentClick);

            $element.on('$destroy', function() {
                $document.off("click", onDocumentClick);
            });
        }
    }
}]);

然后只需在ul中添加outside-click="closeMenu()"，然后

$scope.closeMenu = function(){
    $scope.visible = 0;
}

在控制器中将变量设置为 0，以隐藏菜单下拉菜单。

【讨论】：