- 首页
- 前端开发
- Angular-Material:md-dialog 中的 md-select 未关闭
Angular-Material:md-dialog 中的 md-select 未关闭
[英] Angular-Material : md-select in md-dialog not closing
本文介绍了Angular-Material:md-dialog 中的 md-select 未关闭的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经创建了一个简单的指令，它包含一个包含几个 md-input 和一个 md-select 的表单.
我现在在几页中使用了我的指令，一切正常，但现在我想在 md-dialog 中使用它，但它没有按预期工作，我不能如果我在 md-select-menu 外部单击，则关闭 md-select-menu，即使我关注的是 md-input.
因此，用户关闭菜单的唯一两种方法是选择一个选项或关闭对话框.
还不错，但我觉得这很烦人.
这是对话框的内容:
<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="关闭对话框"></md-icon></md-button>
</md-工具栏><person-form person="person"></person-form></md-dialog>
以及指令内容:
</md-input-container><!-- --><!-- 其他 md-inputs --><!-- --><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="联系人中的联系人" ng-value="{{contact.id}}"><span>{{contact.name}}</span></md-option></md-选择><div class="md-errors-spacer"></div><div ng-messages="createPersonForm.contact.$error"ng-show="createPersonForm.contact.$touched"><div ng-message="required" 翻译>createPersonForm.errors.contactMissing
</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></表单>
我使用的是 Angular 1.5 和 Angular Material 1.0.
我尝试玩弄 z-index，并升级 angular/angular 材料，但没有解决问题.
我正在考虑在 md-select 失去焦点时以编程方式关闭菜单，但我发现这有点难看.我还不知道该怎么做.
提前致谢！
解决方案
对于那些对此感兴趣的人，这是我为解决我的问题所做的工作.我知道这不是最优雅的解决方案，但它对我有用.如果有人有更好的想法，请随时与我们分享！
HTML:
<label>类别</label><md-select ng-model="selectedCategory" md-on-open="dirtyFix()"><md-option ng-repeat="cat in category" ng-value="{{cat}}" ng-selected="$first">{{cat.name}}</md-option></md-选择></md-input-container>
JS:
$scope.dirtyFix= 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-索引:900；}
必须设置超时才能让模态渲染，然后使用 z-index 和 clicklistener.
它远非完美，但也许它会激励你！
I've created a simple directive that consists in a form with few md-input and one md-select.
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.
Here is the content of the dialog :
<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>
And the directive content :
<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>
I'm using Angular 1.5 and Angular Material 1.0 .
I tried toying around with z-index, and upgrading angular/angular material, but it doesn't solve the problem.
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.
Thanks in advance !
解决方案
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;
}
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-dialog 中的 md-select 未关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
