角材料md-select在mdDialog中时不关闭 [英] Angular material md-select not closing when in mdDialog

问题描述

我正在使用角材料1.1.4，角材料1.5.9，并且在md-select指令中存在以下问题.

单击按钮后，我将使用$ mdDialog服务打开一个对话框.该对话框是全屏的.在内部，我有多个输入，以及md-select输入.在md-select上，您可以选择多个项目，因此从列表中选择一个项目后它不会自动关闭.打开它并选择所需的项目后，您可以在其外部单击以将其关闭并转到下一个输入，但是当在mdDialog窗口中使用时，其外部的click事件不会关闭md-select.

我搜索了这个问题，发现了一些问题，但是其中一些问题在几个月内都没有答案，而其他问题都没有解决方案.

非常感谢您的宝贵时间，希望您能以一种干净的方式帮助我.或者，我将不得不手动添加click事件，我希望避免这种情况.

解决方案

我如何解决此问题:

var dialogContainer = angular.element(document.querySelector('.bara-cautare-directive-root')),
        mdSelects = document.getElementsByTagName('md-select');

    dialogContainer.bind('click', function (event) {
        var closeMdSelect = true;

        _.forEach(mdSelects, function (mdSelect) {
            mdSelect = angular.element(mdSelect);
           // what I do here is to check if the click event was triggered by the md-select I want to close. When opening the md-select, it will automatically close it, so I make sure that whenever this md-select is clicked, I don't hide it.
            if (mdSelect.is(event.target) || mdSelect.has(event.target).length != 0) {
                closeMdSelect = false;

                return false;
            }
        });

        if (closeMdSelect) {
            $mdSelect.hide();
        }
    });

I am using angular material version 1.1.4, angular version 1.5.9 and I have the following issue with an md-select directive.

I open a dialog using $mdDialog service on a click of a button. The dialog is fullscreen. Inside I have multiple inputs, along with an md-select input. On md-select you can choose multiple items, so it doesn't automatically close after choosing an item from the list. After opening it and selecting the items you desire, you click outside of it to close it and get to the next input, but when used inside an mdDialog window, the click event outside of it doesn't close the md-select.

I searched for this issue, found a few questions but some of them had no answer in months and other questions didn't have a solution for it.

Thank you very much for your time, hopefully you can help me with a clean way to do this. Alternatively I would have to add the click event manually, which I would prefer to avoid.

解决方案

How I solved the issue:

var dialogContainer = angular.element(document.querySelector('.bara-cautare-directive-root')),
        mdSelects = document.getElementsByTagName('md-select');

    dialogContainer.bind('click', function (event) {
        var closeMdSelect = true;

        _.forEach(mdSelects, function (mdSelect) {
            mdSelect = angular.element(mdSelect);
           // what I do here is to check if the click event was triggered by the md-select I want to close. When opening the md-select, it will automatically close it, so I make sure that whenever this md-select is clicked, I don't hide it.
            if (mdSelect.is(event.target) || mdSelect.has(event.target).length != 0) {
                closeMdSelect = false;

                return false;
            }
        });

        if (closeMdSelect) {
            $mdSelect.hide();
        }
    });

这篇关于角材料md-select在mdDialog中时不关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！