的角材料：md对话框中的md选择不关闭

我创建了一个简单的指令,该指令包含一种形式,该形式具有少量md-input和一个md-select.

我现在已经在几页中使用了指令,并且一切正常,但是现在我想在md对话框中使用它,并且它无法按预期工作,如果我单击,则无法关闭md-select-menu在它外面,即使我专注于md输入.

因此,用户关闭菜单的唯一两种方法是选择选项或关闭对话框.

没那么糟,但我觉得这很烦人.

这是对话框的内容：

<md-dialog aria-label="Modal" ng-cloak flex="75">
    <md-toolbar ng-class="md-primary">
        <div class="md-toolbar-tools">
            <h2 translate>personModal.update</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="cancel()">
                <md-icon md-svg-src="img/ic_close_white.svg" aria-label="Close dialog"></md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <person-form person="person"></person-form>
</md-dialog>

和指令内容：

<form name="createPersonForm" layout="row" layout-align="space-between center" class="bg-sec query-fields">
    <md-input-container flex class="full-width-input">
        <label translate>createPerson.form.firstname</label>
        <input name="firstname" ng-model="person.firstname" required md-asterisk/>
        <div ng-messages="createPersonForm.firstname.$error"
             ng-show="createPersonForm.firstname.$touched">
            <div ng-message="required" translate>
                createPersonForm.errors.firstnameMissing
            </div>
        </div>
    </md-input-container>

    <!--                      -->
    <!-- Other md-inputs here -->
    <!--                      -->

    <md-input-container flex class="consumption-filter full-width-input">
        <label translate>createPerson.form.contact</label>
        <md-select name="contact" ng-model="person.contactId" required>
            <md-option ng-repeat="contact in contacts" ng-value="{{contact.id}}">
                <span>{{contact.name}}</span>
            </md-option>
        </md-select>
        <div class="md-errors-spacer"></div>
        <div ng-messages="createPersonForm.contact.$error"
             ng-show="createPersonForm.contact.$touched">
            <div ng-message="required" translate>
                createPersonForm.errors.contactMissing
            </div>
        </div>
    </md-input-container>

    <md-button class="md-raised bg-white" ng-click="createPerson()" ng-disabled="createPersonForm.$invalid" ng-hide="loading" ><span translate>createPersonForm.errors.createButton</span></md-button>
    <md-progress-circular md-mode="indeterminate" class="md-accent" ng-show="loading"></md-progress-circular>
</form>

我正在使用Angular 1.5和Angular Material 1.0.

我尝试绕过z-index,并升级了角度/角度材料,但是并不能解决问题.

我正在考虑在md-select失去焦点时以编程方式关闭菜单,但我发现这有点丑陋.而且我还不知道该怎么做.

提前致谢 ！

解决方法:

使用上面Freego提出的方法会在角材料1.1.5上给我带来错误

TypeError: Cannot read property '$viewValue' of undefined

我通过将< md-backdrop />的z-index设置为固定在角材料1.1.5中. .md-select-menu-container旁边.

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

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

标签：md-select,angularjs,angular-material,mddialog,javascript
来源： https://codeday.me/bug/20191111/2020870.html