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

问题描述

我使用的是 Angular Material 1.1.4 版和 1.5.9 版，我在使用 md-select 指令时遇到以下问题.

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

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

非常感谢您抽出宝贵时间，希望您能以一种干净的方式帮助我做到这一点.或者，我必须手动添加点击事件，我希望避免这种情况.

解决方案

我是如何解决这个问题的:

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, 函数 (mdSelect) {mdSelect = angular.element(mdSelect);//我在这里做的是检查点击事件是否是由我想关闭的 md-select 触发的.当打开 md-select 时，它会自动关闭它，所以我确保每当点击这个 md-select 时，我不会隐藏它.if (mdSelect.is(event.target) || mdSelect.has(event.target).length != 0) {closeMdSelect = false;返回假；}});如果(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屋！