Angular-Material : md-select in md-dialog 未关闭
Angular-Material : md-select in md-dialog not closing
我创建了一个简单的指令,它包含一个只有几个 md-input 和一个 md-select
.
的表单
我现在已经在几页中使用了我的指令,一切正常,但现在我想在 md-dialog
中使用它,但它没有按预期工作,我无法关闭 md -select-menu 如果我在它外面点击,即使我聚焦一个 md-input。
因此,用户关闭菜单的唯一两种方法是 select 选择一个选项或关闭对话框。
还不错,但我觉得这很烦人。
对话内容如下:
<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 和升级 angular/angular material,但没有解决问题。
我正在考虑在 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>
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。
它远非完美,但也许它会启发你!
使用上面Freego提出的方法在angular-material 1.1.5
上为我抛出一个错误
TypeError: Cannot read property '$viewValue' of undefined
我在 angular-material 1.1.5 中通过设置 <md-backdrop />
的 z-index 和 .md-select-menu-container
.
修复了这个问题
.md-select-menu-container {
z-index: 900;
}
md-backdrop.md-select-backdrop {
z-index: 899;
}
我创建了一个简单的指令,它包含一个只有几个 md-input 和一个 md-select
.
我现在已经在几页中使用了我的指令,一切正常,但现在我想在 md-dialog
中使用它,但它没有按预期工作,我无法关闭 md -select-menu 如果我在它外面点击,即使我聚焦一个 md-input。
因此,用户关闭菜单的唯一两种方法是 select 选择一个选项或关闭对话框。
还不错,但我觉得这很烦人。
对话内容如下:
<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 和升级 angular/angular material,但没有解决问题。
我正在考虑在 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>
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。
它远非完美,但也许它会启发你!
使用上面Freego提出的方法在angular-material 1.1.5
上为我抛出一个错误TypeError: Cannot read property '$viewValue' of undefined
我在 angular-material 1.1.5 中通过设置 <md-backdrop />
的 z-index 和 .md-select-menu-container
.
.md-select-menu-container {
z-index: 900;
}
md-backdrop.md-select-backdrop {
z-index: 899;
}