Question

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

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

当用户点击图标（ul元素）时，我会看到li。当用户按下页面中的任何其他位置时，我需要隐藏ul。

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

Answer 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，以隐藏菜单下拉列表。

如何在AngularJS中的任何位置按下时删除类

1 个答案: