Question

我是第一次写指令。我想做的是当用户点击它打开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>

我的角度：

   $scope.toggleLoggedIn = function () {
        $scope.loggedInOpened = !$scope.loggedInOpened;
        $scope.languagesOpened = false;
        $scope.loginOpened = false;


    };

我的指示看起来像这样：

'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';

            });
        } 

    };
}]);

有什么建议吗？

Answer 1

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

使用ng-show 在您提到的任何条件下将var userclick的值修改为零，并且div将被隐藏，直到userclick值不为1。确保更新的值已应用。将更新的值打印到控制台。使用

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

Answer 2

根据我的理解，我已经创建了一个示例结构，可能对您有所帮助，请查看..

HTML：

---------------------------------
|Who's your favorite pop singer?|
|A: Katy Perry    B: Miley Cyrus|
---------------------------------
|   Option A    |   Option B    |
---------------------------------

JS：

<div ng-controller="MyCtrl"   ng-click="testing() "class="sample">
    <div class="test" ng-hide="hideDiv" > hideDiv </div>
</div>

CSS：

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

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

如何编写指令来隐藏div点击它或页面上的任何地方？

2 个答案: