AngularJS指令是一种通过扩展HTML词汇表来教授HTML新技巧的方法。指令允许您以声明模式管理DOM元素,从而使您免于低级DOM操作任务。
如何将打开焦点功能(类似于 Microsoft Windows 7 日历)添加到我的日历中,如我们使用 Angular Material 版本 1.0.1 的演示中所示,请帮助我解决方案。 谢谢广告...
我正在尝试在自定义指令中传递变量。但是加载后这会变得错误或未定义。请帮助我找到问题并指导我哪里错了。 定制指令 导入 { 指令,
为什么我的事件处理程序总是落后一次击键,$timeout 如何解决这个问题?
我完全困惑为什么我的按键事件处理程序总是落后一次击键。 http://plnkr.co/edit/w3FAXGd5zjrktO6DgOpD?p=preview ... 我完全困惑为什么我的按键事件处理程序总是落后一次击键。 http://plnkr.co/edit/w3FAXGd5zjrktO6DgOpD?p=preview <body ng-controller="myController"> <form> <input ng-keypress="handleKeypress($event)" /> </form> </body> 控制器: myapp.controller('myController', function($scope, $timeout){ $scope.handleKeypress = function(ev){ console.log(ev.target.value); //always one keystroke behind //$timeout(function(){console.log(ev.target.value);}); //works! }; }); 为什么 $timeout 是必要的以及它为什么/如何工作? (最好是对新手友好的答案) 我知道在按键事件中角色尚未插入到 DOM 中,但我很困惑,因为 angularjs.org 上的 Hello World 示例在释放按键之前响应。他们的示例没有使用自定义事件处理程序,但显然 Angular 正在 keyup 事件之前更新模型,因此我想了解有关在自定义事件处理程序中执行此操作的更多信息。 idursun 的回答指出 event.which 可在按键上使用,我认为 Angular 可能正在使用 String.fromCharCode(),但我在 Angular 源代码中没有看到任何与此效果相关的内容。 您应该使用ng-keyup。按键可能并不总是按预期工作。 来自 jQuery 文档: 注意: 由于按键事件未包含在任何官方规范中,因此使用时遇到的实际行为可能会因浏览器、浏览器版本和平台的不同而有所不同。 因为示例中的事件目标是一个输入元素,并且该元素尚未处理击键,所以该元素的 value 始终是一个击键滞后。这使事件处理程序有机会拒绝按键。 您可以通过查看事件对象的 which 字段来检查按下的键值。 tl:dr - event.target.value + event.key 将为您提供最新值。 之所以落后一步,是因为它允许您通过在注册事件之前触发事件来拒绝按键。这不是一个错误,而是一个功能。 但是如果您想获得最新的值,这里有一个解决方法:- html:- <input type="text" (keypress)="myFunction($event)"> JS:- myFunction(event) { event.preventDefault() console.log('latest input field value => ', event.target.value + event.key) } 更新:- 添加 event.preventDefault() 以避免出现双字符。 更新2:- 事件按以下顺序调用:- 按键 按键 更新视图 按键 更新视图 按键 因此,如果您可以将此事件更改为 keyup 那么您将获得最新的值,而不必在方法中进行额外的更改。 它可能会对最新角度的人有所帮助。 我使用(输入)而不是按键,它适用于每个字符的按下。
工具提示适用于未使用 loadChildren 加载的登录组件,但不适用于搜索组件。唯一的区别是 loadChildren 用于加载搜索组件,而不是用于登录
我想获取 DOM 节点的文本内容,但没有有效隐藏的元素(具有样式显示:无)。 我了解 DOM textContent 属性和 jQuery 的 text() 方法(我...
我正在尝试从这样的指令向 angularJs 元素添加属性: element.attr('startOffset', val); 但是当我检查元素时,添加的属性是“startoffset”,其中“...
如何使用 Angular 2 将我的 json 数据导出为 pdf、excel
我已经从 Angular 2 网站创建了我的数据表。现在我想使用 Angular 2 框架将 json 数据导出到 PDF、Excel。 请给我建议如何实现该目标或任何链接,如果......
我有一个 Angular 4 表单,我正在尝试提交数据 HTML 代码 我有一个 Angular 4 表单,我正在尝试提交数据 HTML 代码 <form class="form-horizontal" [formGroup]="signupForm" (ngSubmit)="onFormSubmit()" > <fieldset> <legend>Scheduler</legend> <!--- Gender Block --> <div class="form-group"> <label for="scheduleJob">Schedule Job</label> <input type="text" formControlName = "schedulejob" id="scheduleJob" placeholder="Schedule Job"> 按钮代码 <div class="form-group"> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> Scheduler.TS 文件 import { Component, OnInit } from '@angular/core'; import { Scheduler } from 'rxjs/Scheduler'; /* Import FormControl first */ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-scheduler', templateUrl: './scheduler.component.html', styleUrls: ['./scheduler.component.css'] }) export class SchedulerComponent implements OnInit { //Gender list for the select control element private scheduleTypeList: string[]; //Property for the user private scheduler:Scheduler; private signupForm: FormGroup; constructor(private fb:FormBuilder) { } ngOnInit() { this.scheduleTypeList = ['Type 1', 'Type 2', 'Type 3']; this.signupForm = this.fb.group({ schedulejob: ['', Validators.required] , frequency: ['', Validators.required], days: ['', Validators.required], zone: ['', Validators.required], schedulerjobtype:['', Validators.required] }) } public onFormSubmit() { this.scheduler = this.signupForm.value; if(this.signupForm.valid) { this.scheduler = this.signupForm.value; console.log(this.scheduler); // alert(this.scheduler); /* Any API call logic via services goes here */ } //alert(this.scheduler); console.log(this.scheduler); } } 为什么在提交点击和警报时执行没有传递到 onFormSubmit 或 console.log 不打印值? 就像我在评论中所说,如果您的按钮不在表单内,它将不会提交。 所以改为: <form> ... <button type="submit">Submit</button> </form> 但是,如果您做得有点不同,则可以将其放在外面,如本问题中所述。 我遇到了同样的问题,因为我没有使用 <form> 标签来包装我的表单。 您可以做的一个小技巧是在表单内放置一个辅助隐藏按钮,并让主按钮以编程方式单击辅助按钮: <form [formGroup]="form" (ngSubmit)="submit()"> ... <button type="submit" hidden #btn></button> </form> ... <button (click)="btn.click()">Submit</button> 您需要将按钮代码放入表单中,如下所示 <form class="form-horizontal" [formGroup]="signupForm" (ngSubmit)="onFormSubmit()" > <fieldset> <legend>Scheduler</legend> <!--- Gender Block --> <div class="form-group"> <label for="scheduleJob">Schedule Job</label> <input type="text" formControlName = "schedulejob" id="scheduleJob" placeholder="Schedule Job"> <!-- Button Code Here --> <div class="form-group"> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> <!-- Form ends here --> </form> 您还可以在提交按钮中使用表单属性。该属性使用表单的 id 来引用它: <form id="formID"> ... <button type="submit" form="formID">Submit</button> </form> 我遇到了同样的问题。经过一番努力后,我意识到我在按钮的单击方法中调用了 event.stopProgogation() 和 event.preventDefault() 。当用户单击按钮时,这些方法调用会阻止表单提交。我的问题的解决方案只是删除这些方法调用。 当这件事发生在我身上时,我确实检查了所有可能的方法。最后我发现解决方案是我没有在 app.module 文件中包含 FormsModule 。
将窗口 MutationObserver 与 Angular HostBinding 结合使用时,选项卡崩溃
在我的应用程序中添加 MutationObserver 时遇到了一个非常奇怪的错误。 我的 Angular 组件之一正在使用 HostBinding 到元素的 attr.style 属性,这工作正常......
如何在没有 Host Wrapper 标签的情况下动态加载组件
我正在使用 ViewContainerRef 类的“createComponent()”方法在 Drop Event 期间加载组件模板。一切正常,但它使用 Host Wrapper(选择器)标签加载组件。 b...
我有一个 addButton 并且在点击事件之后这个按钮转换为输入元素。 我的想法是:用户输入一些东西,我将它存储在一个变量中。但它不起作用。 cli后没有alert...
除onload外的angular风格应用加载DOM标记后如何触发函数
我需要用基于角度的应用程序显示一个简单的当前时间。所以尝试了一个演示。 在 body onload 函数中执行该函数。 功能
How to use angular2 built-in date pipe in services and directives script files [重复]
我想在服务和指令脚本文件(不仅在 HTML 中)中使用 angular2 的日期管道。 有人有什么想法吗? 由于一些政策限制,无法上传代码,对此感到抱歉。
这是指令 (功能 () { /** * 配置 */ var moduleName = 'eBayPartsFinder.directives.searchFilters'; /** * 模块 */ angular.module(moduleName, []).directive('searchFilters',
为什么 attr.disabled = "row?.statut === 'TRM' ? true: null" 没有禁用特定的行?
我想禁用不符合我的条件的行,但属性不返回单个禁用行 我想禁用不符合我的条件的行,但该属性不返回单个禁用行 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;" [class.disabled] = "row?.statut === 'TRM' ? true: null"></mat-row> 您可以禁用点击(如果有一些选择事件)并将样式应用于该行。 <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="!row.statut" [ngStyle]="row.statut && {'background-color': 'lightgrey'}"> 禁用行示例 谢谢,那是我没有的替代品。完美的工作
我不知道如何设置功能时间。我正在使用角度。 assinarApenasDespacho() { 让 configDialog: configDataModalDialog = { titulo: "Atenção", mensagem: "Tem certeza que des...
我正在使用角度日历在周视图中显示时间,我可以在其中拖放和自定义时间。以下是角度日历中的示例代码:- 请注意,这只会发生在...
在 MultipleSelection 下拉列表 AngularJS 中显示选定的应用程序置顶
嗨~我有一个应用程序下拉列表,用户可以在其中选择最多 2 个应用程序,我希望选定的应用程序在滚动时始终保持在顶部,因为我需要分配顶部和底部 va...
[在此处输入图片描述](https://i.stack.imgur.com/YX3ll.png) 我使用了可选链接,但该方法不适用于 ES6。 那么有人可以帮助我吗?
对于每个 HTTP 调用,我们都有角度应用程序和微调器(指示用户等待 API 响应)。 var reportApp = angular.module('reportApp', ['ui.bootstrap', 'ngSanitize']);