Angular material md-select 在 mdDialog 中时不关闭

Question

我正在使用 angular material 版本 1.1.4，angular 版本 1.5.9，并且我在使用 md-select 指令时遇到以下问题。

我单击一个按钮，使用 $mdDialog 服务打开一个对话框。该对话框是全屏的。在里面我有多个输入，以及一个 md-select 输入。在 md-select 上你可以选择多个项目，所以它不会在从列表中选择一个项目后自动关闭。打开它并select输入你想要的项目后，你点击它外面关闭它并进入下一个输入，但是当在 mdDialog window 内部使用时，它外面的点击事件不会' t 关闭 md-select.

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

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

Answer 1

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

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();
        }
    });

Answer 2

用户积分@Lihini. Please refer the answer here at:

可以通过覆盖 md-backdrop 的 zindex 来解决该问题。只需添加以下 css

.md-select-menu-container {
    z-index: 900; }

md-backdrop.md-select-backdrop {
    z-index: 899; }

Angular material md-select 在 mdDialog 中时不关闭

Angular material md-select not closing when in mdDialog

angular

angular-material

mddialog

md-select