Question

我正在使用角度材料版本1.1.4，角度版本1.5.9，我有一个md-select指令的以下问题。

单击按钮，我使用$ mdDialog服务打开一个对话框。该对话框是全屏的。我有多个输入，还有一个md-select输入。在md-select上，您可以选择多个项目，因此在从列表中选择项目后它不会自动关闭。打开它并选择所需的项目后，单击其外部以关闭它并进入下一个输入，但在mdDialog窗口中使用时，其外部的单击事件不会关闭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的信用。请参阅此处的答案：https://stackoverflow.com/a/46169071/873976

可以通过覆盖new的{{1}}来解决此问题。只需添加以下css

即可

zindex

Angular material md-select在mdDialog中不关闭

2 个答案: