使用Angular在div外部单击时关闭div

Question

当我想在div外部单击时要关闭div时，这就是jquery的问题。

 $(document).on("click", function (e) {
        if (e.target.id != "user-login-top" && !$(e.target).closest("#user-login-wrapper").length) {
            $("#user-login-wrapper").removeClass("wide");
        }
    });  

角度相等是什么？
小提琴

非常感谢

Answer 1

通过实现自定义指令，在顶部菜单外单击将隐藏右侧边栏。

看看这个： http : //jsfiddle.net/zqdmny41/20/

app.controller('mainCtrl', function ($scope) {
    // Add a function to hide the right sidebar.
    $scope.hideSideMenu = function() {
        $scope.bodyCon = false;
        $scope.noneStyle = false;
    }
    ...
})
.directive("outsideClick", ['$document', function( $document){
return {
    link: function( $scope, $element, $attributes ){
        var scopeExpression = $attributes.outsideClick,
            onDocumentClick = function(event){
                if(event.target.id != 'rightMenu' && event.target.id != 'toggle-menu') {
                    $scope.$apply(scopeExpression);
                }
            };

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

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

在您的HTML中：

<aside class="rightbar" id="rightMenu" ng-class="{'noneStyle' : noneStyle}" outside-click="hideSideMenu()">

效果是：

• 单击顶部图标将切换右侧边栏，
• 点击右侧边栏本身不会触发任何操作，
• 然后点击其他地方将隐藏右侧边栏。

基本逻辑是：

• 创建一个名为“ outsideClick”的自定义指令，并通过添加一个属性outside-click="hideSideMenu()"将其应用于右侧工具栏菜单。
• 函数名称hideSideMenu传递到指令中，该指令将click事件添加到文档中。
• 当用户单击文档时，如果目标ID不是rightMenu且没有toggle-menu ，则右侧边栏将被隐藏。

参考： http ： //vadimpopa.com/onblur-like-for-a-div-in-angularjs-to-close-a-popup/