我预计元素中属性的顺序可以更改，尽管 html 中的顺序(仅 FF 43.0.1)。示例:
<input type="checkbox" data-type="can-be-also-empty"/>请先在 Chrome 中运行代码片段，然后在 FF 中运行。
开发工具的结果:
<input data-type="can-be-also-empty" type="checkbox"/> -FF
<input type="checkbox" data-type="can-be-also-empty"/> - Chrome
这可能会受到使用 Angular 影响。 Custom directives guide
Angular normalizes an element's tag and attribute name to determine which elements match which directives
The normalization process is as follows: Strip x- and data- from the front of the element/attributes.
这就是为什么我认为，如果 data-type属性首先出现在元素中， Angular 剥离 data-它影响type="checkbox"至type="can-be-also-empty" .
下一个片段可以更好地显示我的意思:
angular.module('app', []).directive('example', function(){
return {
template: '<input type="checkbox" data-type="eny-value" ng-model="value"/><p>{{value}}</p>',
restrict: 'E',
link: function($scope){
$scope.value = false;
}
}
})<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<example></example>
</body>
</html>也尝试在 FF 和 Chrome 中运行它，表达式不会在 FF 中被评估。
下一步，移动data-type="eny-value"之前type 。现在它无法在任何浏览器中运行。
最佳答案
问题来自于 AngularJS 如何匹配指令。在这种特殊情况下，它与 input[checkbox] 相关，它的匹配来自 type 属性。根据AngularJS docs for directives ，它可以从 type 和 data-type 进行匹配，因此当 Angular 标准化数据类型时，根据属性的顺序，它会覆盖先前的值(又名复选框)。
此行为导致 input[checkbox] 永远不会按预期工作，因此 ngModel 永远不会收到选中字段的值。
最好的方法是不要使用这样的东西，不要使用与 angularjs 规范化匹配的属性。
关于javascript - 新版本的 FF 更改了输入中属性的顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40139383/