在Angular 1.2和Angular 1.6之间触发ng-click和ng-change的区别

时间:2018-07-31 12:21:02

标签: angularjs angularjs-1.7

AngularJS 1.2和1.6之间发生了某些事情,从而颠倒了ng-clickng-change的启动顺序。

我已经花了很多时间来说明它:http://plnkr.co/edit/XgbgLSuP1znhWszeyiHd?p=preview

此页面的默认设置是使用Angular 1.2.28。在这种情况下,如果您更改示例中的单选按钮,则会看到click事件在change事件之前触发。

如果您随后切换注释以便使用Angular 1.6.10,您将看到change事件现在在click事件之前触发。

在AngularJS的开发过程中发生了什么导致这一现象,并且在使用最新版本的AngularJS时有什么方法可以保留以前的行为?

非常感谢您能提供的任何帮助!

编辑:我应该说为什么这很重要。我希望能够在更改变量之前检查变量的值,以查看是否应允许更改。我能够在AngularJS 1.2上使用ng-click来执行此操作,但是由于首先在AngularJS 1.6上触发了ng-change,因此在确定是否应该继续之前已经进行了更改。如果您对我如何使用AngularJS 1.6做到这一点还有其他想法,我将非常有兴趣听到他们的声音。

1 个答案:

答案 0 :(得分:1)

以下是不同版本行为的摘要:

 AngularJS V1.2   CLICK handler fires first    
 AngularJS V1.3   CHANGE handler fires first
 AngularJS V1.4   CHANGE handler fires first
 AngularJS V1.5   CHANGE handler fires first
 AngularJS V1.6   CHANGE handler fires first
 AngularJS V1.7   CLICK handler fires first

依赖于元素上事件顺序的代码缺乏鲁棒性。只写健壮的代码。避免依赖于库或浏览器的无用功能的易碎代码。

使用单选按钮上的ng-disabled directive阻止选择。


来自文档:

  

input [radio]和input [checkbox]

     

由于656c8finput[radio]input[checkbox]现在正在监听“更改”事件而不是“点击”事件。大多数应用程序都不会受到影响,因为“点击”发生后浏览器会自动触发“更改”。

     

— AngularJS Developer Guide - Migrating to V1.7

ALSO

  

修复(输入):收听“更改”而不是“单击”单选/复选框...

     

…ngModels

     

input[radio]input[checkbox]现在改为监听更改事件   点击事件。这解决了触发第三方库的问题   输入的变更事件,例如Bootstrap 3自定义复选框/单选按钮   切换。

     

这也使得防止可能导致复选框/广播的特定事件更容易   改变,例如点击事件。以前,这很困难,因为自定义点击   必须在输入指令的点击处理程序之前注册处理程序。

     

因为IE8具有   无法听取更改意见,请参阅http://www.quirksmode.org/dom/events/change.html

     

— Github commit #656c8f