1

我正在使用 angular material 版本 1.1.4，angular 版本 1.5.9，并且我有一个 md-select 指令的以下问题。

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

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

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

4

2 回答 2

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();
        }
    });
于 2017-07-25T18:22:50.227 回答
0

归功于用户@Lihini。请在此处参考答案：https ://stackoverflow.com/a/46169071/873976

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

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

md-backdrop.md-select-backdrop {
    z-index: 899; }
于 2018-01-22T10:47:16.867 回答