Question

当我们在div外面或窗口中点击时，xyz应该隐藏

var app = angular.module('myApp', []);  
   app.controller('myCtrl', function($scope) {  
        $scope.showDropdown = false;
     $scope.helloClick = function(){
        if($scope.showDropdown == true){
            $scope.showDropdown = false;
        }
        else{
            $scope.showDropdown = true;
        }
     }
  });

这是我的jsfiddler链接 https://jsfiddle.net/8ftrnenw/

Answer 1

这是您需要的解决方案，

我创建了 custom directive
该指令采用 click-outside 属性，并检查我们添加该指令的元素的点击。
如果容器位于我们添加指令的 element 之外，则会隐藏 div

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.showDropdown = false;
   $scope.hide = function(){
     $scope.showDropdown = false;
   }
   $scope.helloClick = function(){
  	$scope.showDropdown = !$scope.showDropdown;
  }
}

});
app.directive('clickOutside', function ($document) {

        return {
           restrict: 'A',
           scope: {
               clickOutside: '&'
           },
           link: function (scope, el, attr) {

               $document.on('click', function (e) {
                   if (el !== e.target && !el[0].contains(e.target)) {
                        scope.$apply(function () {
                            scope.$eval(scope.clickOutside);
                        });
                    }
               });
           }
        }

    });

.xyz{
	border:1px solid red;
	width:200px;
	height:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div  click-outside="hide()">
<div class="hello" ng-click ="helloClick()">hello</div>
<div class="xyz"  ng-if="showDropdown">xyz</div>
</div>
</div>

请运行以上代码段

Here is a working DEMO

Ps：说明指令：

el !== e.target && !el[0].contains(e.target)

您点击的元素是el，el是您添加指令的元素。因此，它会检查您单击的元素是否为该指令。如果没有，那么它将隐藏所需的div

scope.$eval(scope.clickOutside);

这将评估属性并调用我们在click-outside="hide()"

中提供的函数

在Angular js中点击div得到隐藏

1 个答案: