Angularjs 如何编写隐藏div的指令单击它或页面上的任何位置？

我是第一次写指令。我试图做的是当用户点击div时，打开那个div，若div打开了，用户点击页面上的任何地方关闭那个div，若div关闭了，用户点击页面上的任何地方那个div保持关闭。我的html如下所示：

<div id="loggedIn" close-logged-in class="fade-show-hide" ng-show="loggedInOpened" default-display='block' ng-cloak>
@Html.Partial("~/Views/Shared/_LoggedInPartial.cshtml")
</div>

'use strict';
angular.module("mainModule").directive('closeLoggedIn',['$window', function ($window) {
    return {

        // bind a local scope (i.e. on link function scope) property 
        // to the value of default-display attribute in our target <div>.
        scope: {
            defaultDisplay: '@'
        },

        restrict: 'A',

        link: function (scope, element, attrs) {

            var el = element[0];


            el.style.display = scope.defaultDisplay || 'block';  

            angular.element($window).bind('click', function(){        

                if(scope.defaultDisplay == 'block')
                el.style.display = 'none';

            });
        } 

    };
}]);

我的指令是这样的：

<div id="loggedIn" close-logged-in class="fade-show-hide" ng-show="loggedInOpened" default-display='block' ng-cloak>
@Html.Partial("~/Views/Shared/_LoggedInPartial.cshtml")
</div>

'use strict';
angular.module("mainModule").directive('closeLoggedIn',['$window', function ($window) {
    return {

        // bind a local scope (i.e. on link function scope) property 
        // to the value of default-display attribute in our target <div>.
        scope: {
            defaultDisplay: '@'
        },

        restrict: 'A',

        link: function (scope, element, attrs) {

            var el = element[0];


            el.style.display = scope.defaultDisplay || 'block';  

            angular.element($window).bind('click', function(){        

                if(scope.defaultDisplay == 'block')
                el.style.display = 'none';

            });
        } 

    };
}]);

“严格使用”；
angular.module（“mainModule”）.directive（'closeLoggedIn'，['$window'，function（$window）{
返回{
//绑定本地作用域（即链接函数作用域）属性
//设置为目标中默认显示属性的值。
范围：{
defaultDisplay:“@”
},
限制：“A”，
链接：函数（范围、元素、属性）{
var el=元素[0]；
el.style.display=scope.defaultDisplay | |“block”；
angular.element（$window）.bind（'click'，function（）{
如果（scope.defaultDisplay=='block'）
el.style.display='none'；
});
} 
};
}]);

---

有什么建议吗？

据我所知，我已经创建了一个示例结构，它可能对您有帮助。请检查

HTML:

CSS:

---

据我所知，我已经创建了一个示例结构，它可能对您有帮助，请检查

HTML:

CSS:

---

对什么的建议？您还没有定义任何问题问题是，当我单击div its not show时，它会在该div上添加display:none，如果我手动删除它，它会工作，那么您就得到了一个jsfiddle？请注意，问题陈述不是很清楚。请用正确的问题陈述更新问题，并说明您预期会发生什么。也许您想检查div是否是目标。我认为您可以使用ng hide或ng show。使用此选项可以显示和隐藏要显示的div。另外，div应该位于另一个div上，这意味着

，因此通过单击main div，您可以隐藏和显示divUNeedToHide。建议什么？您还没有定义任何问题问题是，当我单击div its not show时，它会在该div上添加display:none，如果我手动删除它，它会工作，那么您就得到了一个jsfiddle？请注意，问题陈述不是很清楚。请用正确的问题陈述更新问题，并说明您预期会发生什么。也许您想检查div是否是目标。我认为您可以使用ng hide或ng show。使用此选项可以显示和隐藏要显示的div。另外，div应该位于另一个div上意味着

，因此通过单击main div，您可以隐藏并显示divUNeedToHide。为什么函数视图中有参数，但声明中没有参数？从控制器执行此操作没有意义。为什么函数的视图中有参数，而声明中没有？从控制器执行此操作没有意义。

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.hideDiv = false;
    $scope.testing = function () {
        if ($scope.hideDiv) {
        $scope.hideDiv = false;
        } else {
            $scope.hideDiv = true;
        }
    }
}

.sample{
    background-color: red;    
    height:100px;
    width: 100%;
}

<div ng-controller="MyCtrl"   ng-show="userclick==1" class="sample">
    <div class="test" ng-hide="hideDiv" > hideDiv </div>
</div>

$scope.$apply(function () {
            $scope.userclick = 0;
        });