Javascript 角度材质：md在md对话框中选择未关闭

我创建了一个简单的指令，它由一个表单组成，其中包含少量的md输入和一个

md select

我已经在几页中使用了我的指令，现在一切都很好，但现在我想在

md对话框中使用它，但它没有按预期工作，如果我在md选择菜单外单击，即使我聚焦md输入，我也无法关闭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>


personModal.update

以及指令内容：

<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>


createPerson.form.firstname
createPersonForm.errors.firstnameMissing
createPerson.form.contact
{{contact.name}
createPersonForm.errors.contactMissing
createPersonForm.errors.createButton

我使用的是Angular 1.5和Angular Material 1.0

我试着玩弄z索引，升级角度/角度材质，但这并不能解决问题

我正在考虑在md select失去焦点时按程序关闭菜单，但我发现这有点难看。我还不知道该怎么做

提前谢谢
 对于那些感兴趣的人，这里是我为解决我的问题所做的。我知道这不是最优雅的解决方案，但它对我有效。如果有人有更好的想法，欢迎与我们分享

HTML:

            <md-input-container flex>
                <label>Category</label>
                <md-select ng-model="selectedCategory" md-on-open="dirtyFix()">
                    <md-option ng-repeat="cat in categories" ng-value="{{cat}}" ng-selected="$first">{{cat.name}}
                    </md-option>
                </md-select>
            </md-input-container>

CSS:

必须设置一个超时，让模态渲染，然后玩弄z索引和clicklistener

这远不是完美的，但也许它会激励你
 使用上面Freego提出的方法会在角度材质1.1.5上为我抛出一个错误

TypeError: Cannot read property '$viewValue' of undefined

我在angular material 1.1.5中通过在
.md select menu container
旁边设置
的z索引来解决这个问题

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

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

你找到解决办法了吗？我也遇到了同样的问题。在打开和关闭md时，必须对md滚动掩码的z-index和onClickListener进行错误修复-select@Holt如果你感兴趣的话，我贴了一个答案，上面写着我所做的，很好的答案。。一个简单的css黑客做到了这一点。我已经提到你对相关问题的回答：@sandepsukhija谢谢：-）
TypeError: Cannot read property '$viewValue' of undefined

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

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