- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在使用 AngularJS 1.6 和 Angular Material 我有一个 md-autocomplete 曾经工作得很好,但是在我把它放在一个 md-dialog 框中之后,它不再那么好用了。每当我点击自动完成字段时,焦点立即消失并且我无法填写输入内容。(或者你必须非常快才能在焦点消失之前写一封信)。
我尝试在点击、聚焦和按键时执行 event.stopPropagation() 但它没有帮助。我想了一下,两个 Controller 的范围是冲突的,所以我删除了两个范围之间的链接,但没有帮助。我搜索了一下,之前似乎没有人遇到过这个。
这是触发 md-dialog 的代码:
public showAddAuthDialog(ev: any) {
this.$mdDialog.show({
controller: AddJobAuthDialogController,
controllerAs: "AddAuthDialog",
templateUrl: 'public/app/views/dialogs/addAuthDialog.html',
targetEvent: ev,
clickOutsideToClose: true,
fullscreen: this.customFullscreen,
scope: this.$scope,
preserveScope:true
});
}
注意:我传递范围以保留数据,我认为这是问题所在所以我删除了它并且没有任何改变。
这是对话框 Controller 的代码:
export class AddJobAuthDialogController {
static $inject = ['$scope','$mdDialog',
'$timeout',
'$q',
'jobService'];
public simulateQuery: boolean;
public selectedItem: any;
public selectedItemId: string;
public searchTxt: string;
public jobsToSearch: any;
public selectedItemAD: any;
public searchTxtAD: string;
public grpsToSearch: any;
public customFullscreen = false;
constructor(public $scope: any,
public $mdDialog: any,
public $timeout: any,
public $q: any,
public jobService: jobs.IJobService) {
this.simulateQuery = true;
this.selectedItem = null;
this.searchTxt = null;
this.selectedItemAD = null;
this.searchTxtAD = null;
this.jobsToSearch = this.$scope.Administration.jobsToSearch;
this.grpsToSearch = this.$scope.Administration.grpsToSearch;
}
public $onChanges(changes) {
if (changes.selectedItem) {
this.selectedItem = changes.selectedItem.currentValue;
}
if (changes.jobsToSearch) {
this.jobsToSearch = changes.jobsToSearch.currentValue;
}
if (changes.selectedItemId) {
this.selectedItemId = changes.selectedItemId.currentValue;
}
if (changes.grpsToSearch) {
this.grpsToSearch = changes.grpsToSearch.currentValue;
}
}
public sendForm(event: any) {
this.jobService.saveNewEntry(this.selectedItem.value, this.selectedItemAD.value).then((d) => {
console.log(d);
if (d.data == -1)
this.showError(event);
else
this.showSuccess(event);
});
}
public showSuccess(ev: any) {
this.$mdDialog.show({
controller: InsertDialogController,
controllerAs: "InsertDialog",
templateUrl: 'public/app/views/dialogs/adminInsertSuccessDialog.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
fullscreen: this.customFullscreen // Only for -xs, -sm breakpoints.
});
};
public showError(ev: any) {
this.$mdDialog.show({
controller: InsertDialogController,
controllerAs: "InsertDialog",
templateUrl: 'public/app/views/dialogs/adminInsertFailDialog.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
fullscreen: this.customFullscreen // Only for -xs, -sm breakpoints.
});
};
public querySearch(query, objectToSearch) {
var results = query ? objectToSearch.filter(this.createFilterFor(query)) : objectToSearch,
deferred;
if (this.simulateQuery) {
deferred = this.$q.defer();
this.$timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
public createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return (res) => {
return (angular.lowercase(res.display).indexOf(lowercaseQuery) !== -1);
};
}
public cancelDialog() {
this.$mdDialog.cancel();
}
}
这是 html 模板:
<md-dialog class="dialogSuccess" aria-label="Add Groups To Job">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Add Groups To Job</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="AddAuthDialog.cancelDialog()">
<md-icon class="closeIcon" md-font-icon="mdi mdi-close" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-content layout="column" flex ng-cloak>
<div class="md-dialog-content">
<form>
<md-autocomplete flex
md-input-name="autocompleteField"
md-input-minlength="0"
md-input-maxlength="18"
md-no-cache="true"
md-selected-item="AddAuthDialog.selectedItem"
md-search-text="AddAuthDialog.searchTxt"
md-items="item in AddAuthDialog.querySearch(AddAuthDialog.searchTxt,AddAuthDialog.jobsToSearch)"
md-item-text="item.display"
md-floating-label="Jobs">
<md-item-template>
<span md-highlight-text="AddAuthDialog.searchTxt">{{item.display}}</span>
</md-item-template>
<md-not-found>Job "{{AddAuthDialog.searchTxt}}" not found </md-not-found>
</md-autocomplete>
<md-autocomplete flex
md-input-name="autocompleteFieldAD"
md-input-minlength="3"
md-input-maxlength="18"
md-no-cache="true"
md-selected-item="AddAuthDialog.selectedItemAD"
md-search-text="AddAuthDialog.searchTxtAD"
md-items="i in AddAuthDialog.querySearch(AddAuthDialog.searchTxtAD,AddAuthDialog.grpsToSearch)"
md-item-text="i.display"
md-floating-label="AD Groups">
<md-item-template>
<span md-highlight-text="AddAuthDialog.searchTxtAD">{{i.display}}</span>
</md-item-template>
<md-not-found>Job "{{AddAuthDialog.searchTxtAD}}" not found </md-not-found>
</md-autocomplete>
</form>
</div>
</md-content>
<md-dialog-actions>
<md-button class="md-raised md-primary md-hue-1" ng-click="AddAuthDialog.sendForm()">Add</md-button>
</md-dialog-actions>
</md-dialog>
注意:有那么一刻我认为问题出在 float 标签上,因为我的控制台中有以下警告:
mdInput messages show animation called on invalid messages element: JQLite [md-input-container.ng-scope.md-input-focused.md-input-has-value.ng-animate.md-input-invalid]
然后我删除了它以放置一个占位符,但行为没有改变。有什么问题可能来自哪里?
更新:
似乎焦点丢失了,因为它重新聚焦在已单击的按钮上,如果我取消聚焦按钮,页面上的每个事件都不会再触发。
这是按钮的html代码:
<div class="fab-container" layout="row" layout-align="end end">
<md-fab-speed-dial md-open="false" md-direction="up"
ng-class="md-fling">
<md-fab-trigger ng-click="Administration.showAddAuthDialog($event)" ng-focus="false">
<md-button aria-label="menu" class="md-fab md-accent">
<md-icon class="mdi mdi-plus fab-button-icon"></md-icon>
</md-button>
</md-fab-trigger>
</md-fab-speed-dial>
</div>
最佳答案
问题似乎出在 md-fab-speed-dial 上,不知为何它始终处于焦点状态。我只是用一个简单的按钮替换了整个东西,现在它工作得很好。
新的 html:
<div layout="row" layout-align="end end">
<md-button ng-click="Administration.showAddAuthDialog($event)" aria-label="menu" class="md-fab md-accent">
<md-icon class="mdi mdi-plus fab-button-icon"></md-icon>
</md-button>
</div>
关于javascript - md-dialog 中的 md-autocomplete 在点击时失去焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49174346/
使用的浏览器 - Chrome 67.0.3396.99 我创建了一个 DialogsModule它有一个组件 ConfirmDialog.component.ts使用以下模板 confirm-dia
我一直在尝试制作一个简单的程序来使用Electron创建和读取文件。 到目前为止,我已经尝试了很多,并且似乎没有提供与dialog.showOpenDialog一起提供的回调函数。 dialo
我有一个登录对话框,想防止它在按下回车键时自动关闭。 更具体地说,当用户输入凭据并按下回车键时,凭据的响应返回错误,我希望对话框保留(这样我就可以向他们显示一些错误消息,让用户再试一次) . 这就是我
Jquery对话框的含义是什么:它是单独的网页还是网页的一部分? (我不太了解 Jquery)。 谢谢 最佳答案 jQuery 对话框将出现在页面上方,但它实际上是当前页面的一部分。当您加载对话框时,
当用户退出 xe:dialog 时,我需要做一些清理工作。我将代码放在 onUnload 事件中,如下所示: viewScope.remove("vsSomeVariable"); viewScope
我想相对于我的 html 元素之一定位 Dojo 的 Dijit 对话框。是否可以? 如是。如何? 目前它总是在视口(viewport)中间显示对话框。 有人可以帮我解决这个问题吗? 谢谢。 amar
即使属性设置为“openDirectory”,是否也可以在 showOpenDialog 中显示文件?当然,文件不应该是可选的,但可能会显示为灰色。所以用户知道他选择了正确的目录。在 OSX 上一切正
如何使用 android 标准组件 Bottom Sheet 单实现以下设计功能: 出现 Bottom Sheet 对话框片段时的图像: 用户向上滚动以查看内容底部时的图像: 我将使用 ViewPag
我刚开始使用对话框,我非常喜欢在资源文件中定义布局的可能性。但是是否可以设置一个对话框并将其嵌入到另一个对话框中(即没有 float 对话框)? 对于普通窗口,我创建了一个带有一个子窗口的主窗口。然后
我正在尝试更改 dialog 的背景颜色元素的 backdrop使用自定义 CSS 属性,但不需要。这是 Chrome 中的错误还是有原因? document.querySelector('dialo
我有一个 Electron 应用程序。如果我通常使用dialog.showmessageBoxSync,则必须等待用户输入。选项为:关闭,取消或确定。 它工作正常,但是如果我在对话框外部(应用程序内的
我有一个启动确认对话框的 View ,但代码不是等待对话框返回结果,而是直接跳转到 promise 的“then”部分。请参阅下面的代码: ConfirmDialog.ts import { inje
我有一个启动确认对话框的 View ,但代码不是等待对话框返回结果,而是直接跳转到 promise 的“then”部分。请参阅下面的代码: ConfirmDialog.ts import { inje
我正在使用 MonoTouch.Dialog 的 OwnerDrawnElement,但它似乎不允许用户在触摸屏幕时“突出显示”单元格。我查看了示例,但它没有显示突出显示。有什么建议么? 我注意到 T
此选择器在 http://jqueryui.com/demos/dialog/#modal-confirmation 中引用(源代码)。 $( "#dialog:ui-dialog" ).dialog
我有一个奇怪的问题。当 Activity 开始时,我会显示一个对话框,说明某些项目正在加载,如下所示: Dialog dialog; @Override public void onCreate(Bu
jquery-ui 中 .dialog("close") 和 .dialog("destroy") 有什么区别? 我有一个脚本,以前的开发人员使用了 .dialog("destroy") 但现在我必须
我正在使用 Acengage (Ad4Push),我想自定义它的对话框。 Acengage 团队说可以使用自定义主题更改对话框样式,我做到了。我可以更改 textSize、textColor、wind
我有一个标准 View ,顶部有一个导航栏。我还在它自己的源文件中设置了一个 Monotouch.Dialog。我四处寻找解决方案,但似乎找不到关于如何将 MTD 添加到普通 View 的明确答案。
我试图从一个打开的 md-dialog 中打开一个 md-dialog,但问题是第一个 md-dialog 在第二个打开时关闭了 // the controller of the first popU
我是一名优秀的程序员,十分优秀!