angularjs - Angular 1.2 和 Angular 1.6 之间触发 ng-click 和 ng-change 的顺序差异

Question

AngularJS 1.2 和 1.6 之间发生了一些事情来颠倒 ng-click 的顺序。和 ng-change开火。

我做了一个 plunk 来说明它:http://plnkr.co/edit/XgbgLSuP1znhWszeyiHd?p=preview

此页面默认使用 Angular 1.2.28 .在这种情况下，如果您更改示例中的单选按钮，您将看到单击事件在更改事件之前触发。

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

在 AngularJS 的开发过程中发生了什么导致这种情况，有没有办法在使用更新版本的 AngularJS 的同时保留以前的行为？

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

编辑:我可能应该说为什么这很重要。我希望能够在变量更改之前检查它的值，以查看是否应该允许更改。我可以使用 ng-click 做到这一点在 AngularJS 1.2 上，但因为 ng-change在 AngularJS 1.6 上首先被触发，在我决定是否应该继续之前已经进行了更改。如果您对我如何使用 AngularJS 1.6 实现这一点有其他想法，我很想听听他们的意见。

Answer 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] and input[checkbox]

Due to 656c8f, input[radio] and input[checkbox] now listen to the "change" event instead of the "click" event. Most apps should not be affected, as "change" is automatically fired by browsers after "click" happens.

— AngularJS Developer Guide - Migrating to V1.7

还

fix(input): listen on "change" instead of "click" for radio/checkbox …

…ngModels

input[radio] and input[checkbox] now listen on the change event instead of the click event. This fixes issue with 3rd party libraries that trigger a change event on inputs, e.g. Bootstrap 3 custom checkbox / radio button toggles.

It also makes it easier to prevent specific events that can cause a checkbox / radio to change, e.g. click events. Previously, this was difficult because the custom click handler had to be registered before the input directive's click handler.

It is possible that radio and checkbox listened to click because IE8 has broken support for listening on change, see http://www.quirksmode.org/dom/events/change.html

— Github commit #656c8f