Angular-Material：md-select在md-dialog中没有关闭 [英] Angular-Material : md-select in md-dialog not closing

问题描述

我创建了一个简单的指令，它包含一个md-input很少的表单和一个 md-select 。

I've created a simple directive that consists in a form with few md-input and one md-select.

我现在已经在几页中使用了我的指令并且一切正常，但现在我想在 md-dialog 中使用它并且它不起作用正如预期的那样，如果我点击它之外我就无法关闭md-select-menu，即使我关注md-input。

I've used my directives in a few pages now and everything works fine, but now i would like to use it inside an md-dialog and it's not working as expected, i can't close the md-select-menu if i click outside of it, even if i focus an md-input.

所以只有两种方式用户关闭菜单是选择一个选项或关闭对话框。

So the only two ways for the user to close the menu is to either select an option or dismiss the dialog.

这不是那么糟糕，但我觉得这很烦人。

It's not that bad but i found this rather annoying.

这是对话框的内容：

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

I'm using Angular 1.5 and Angular Material 1.0 .

我尝试用z-index和升级角度/角度材料，但它没有解决问题。

I tried toying around with z-index, and upgrading angular/angular material, but it doesn't solve the problem.

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

I'm considering closing the menu programatically when the md-select looses focus, but i found that kinda ugly. And i don't know how do to do that yet.

提前致谢！

推荐答案

对于那些感兴趣的人，我已经采取了解决问题的方法。我知道这不是最优雅的解决方案，但它对我有用。如果有人有更好的想法随时与我们分享！

For those interested here is what i've done to fix my problem. I know it's not the most elegant solution, but it worked for me. If anyone has a better idea feel free to share with us !

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>

JS：

$scope.dirtyFix= function () {
    $timeout(function () {
        $(".md-scroll-mask").css("z-index", 899);
        $(".md-scroll-mask").click(function () {
            $(".md-select-menu-container").remove();
            $(".md-scroll-mask").css("z-index", -1);
        });
    }, 500);
}

CSS：

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

必须设置超时以让模态渲染然后用z-玩具index和clicklistener。

Had to set a timeout to let the modal render and then toy with z-index and clicklistener.

这远非完美，但它可能会激励你！

It's far from perfect but maybe it'll inspire you !

这篇关于Angular-Material：md-select在md-dialog中没有关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！