javascript - 在 Angular js 中单击 div 外部隐藏

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)

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

scope.$eval(scope.clickOutside);

这将评估属性并调用我们在 click-outside="hide()" 中给出的函数