外点击关闭时，下拉单或多选 [英] closing dropdown single or multiselect when clicking outside

问题描述

我试图接近我的下拉菜单这是多选。下面是code我想：

I am trying close my drop downs which are multiselect. below is the code I am trying :

element.bind('click', function (event) {
    event.stopPropagation();
});

$document.bind('click', function () {
    $scope.opened = false;
    $scope.$apply();
});

但一旦我点击下拉窗口之外。点击触发了多个点击事件，并为每个点击以下code块是越来越喜欢叫= 40，n次90等我想这是等于在窗口元素的数量：

but once I click outside the drop down window. one click is triggering multiple click event and for each click below block of code is getting called n number of times like = 40, 90 etc I guess it is equal to number of element in the window:

$document.bind('click', function () {
    $scope.opened = false;
    $scope.$apply();
});

我试过连 event.stopPropagation（）只是document.bind后，但没有奏效。

I tried even event.stopPropagation() just after document.bind but it did not work.

code的这些块我写我的多选创建指令的链接函数内。

These chunk of code I have written inside the link function of directive which I created for multiselect.

推荐答案

我一直在使用下面的单一选择和多项选择下拉菜单解决方案，解决了我的问题。

I have solved my problem using below solution for single Select and Multi Select dropdown.

1. 下面溶液可在生产中使用，因为它不具有任何性能影响这样

我的设计方法我已创建了指令单选择如下：

My Approach of design I have create directive for single select as below:

.directive("selection", ['$document',
        function ($document) {
       -- your variable initialization--
       --any other method if you have like I have --
         $scope.change = function (item) {
          -------- my implementation 
     };
     $scope.selected = function (item) {
         -------- my implementation
    };
//Actual click event should be handled in link function
function link($scope, element, attributes, ngModel) {
   --other methods if you have any--
            element.bind('click', function(event) {
                    $scope.onElementClick = true;
                    $document.on("click", $scope.onClick);
                });

                 $scope.onClick = function (event) {
                    if($scope.onElementClick && $scope.opened)
                    {
                      $scope.onElementClick = false;
                      return;
                    }
                    $scope.opened = false;
                    $scope.$apply(attributes.selection);
                    $document.off("click", $scope.onClick);
                  };
                }
                return {
                restrict: 'E',
                controller: controller,
                link: link,
               scope: true,
               require: "ngModel",
               templateUrl: 'your template file(e.g: filename.tpl.html)'
        };

所以上面code与文档单击事件只有当你在任何一个选择下拉点击下来，因为它得到，因为$ document.off的关闭将尽快解除绑定将绑定（点击，$范围。的onClick）;

So above code will bind the click event with document only when you click on any single select drop down and it will unbind as soon as it gets closed because of $document.off("click", $scope.onClick);

对于多选下拉你需要像下拉不应该封闭处理特殊情况下，如果您单击其他元素上聪明人，你不能一次选择多个选项。所以你如果点击的元素内停止click事件的传播。请在下面改变您单击事件链接函数内部处理：

for multi select drop down you need to handle special case like drop down should not get closed if you click on the element other wise you can not select more than one option at a time. so you have to stop the propagation of click event if it is clicked inside the element. please make below change in you click event handling inside link function:

.directive("multiSelection", ['$document',
        function ($document) {
       -- your variable initialization--
       --any other method if you have like I have --
         $scope.change = function (item) {
          -------- my implementation 
     };
     $scope.selected = function (item) {
         -------- my implementation
    };
//Actual click event should be handled in link function
function link($scope, element, attributes, ngModel) {
   --other methods if you have any--
element.bind('click', function(event) {
                $document.on("click", $scope.onClick);
                event.stopPropagation();
            });

            $scope.onClick = function (event) {
                $scope.opened = false;
                $scope.$apply(attributes.multiSelect);
                $document.off("click", $scope.onClick);
            };
         }

        return {
            restrict: 'E',
            controller: controller,
            link: link,
            require: "ngModel",
            templateUrl: 'your template file(e.g: filename.tpl.html)'
        };

希望它能帮助

这篇关于外点击关闭时，下拉单或多选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！