Угловой материал md-select не закрывается, когда в mdDialog

Question

Я использую угловой материал версии 1.1.4, угловой версии 1.5.9, и у меня возникла следующая проблема с директивой md-select.

Я открываю диалог, используя сервис $mdDialog одним нажатием кнопки. Диалог полноэкранный. Внутри у меня есть несколько входов, а также вход md-select. В md-select вы можете выбрать несколько элементов, чтобы он не закрывался автоматически после выбора элемента из списка. Открыв его и выбрав нужные элементы, вы щелкаете за его пределами, чтобы закрыть его и перейти к следующему входу, но при использовании внутри окна mdDialog событие click вне него не закрывает md-select.

Я искал эту проблему, нашел несколько вопросов, но у некоторых из них не было ответа в течение нескольких месяцев, и у других вопросов не было решения для этого.

Большое спасибо за ваше время, надеюсь, вы можете помочь мне с чистым способом сделать это. В качестве альтернативы мне бы пришлось добавить событие click вручную, чего я бы предпочел избежать.

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. Пожалуйста, обратитесь ответ здесь: /questions/967892/angular-material-md-select-v-md-dialoge-ne-zakryivaetsya/967906#967906

Проблема может быть решена путем переопределения zindex из md-backdrop, Просто добавьте следующий CSS

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

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