新版本的FF改变了输入属性的顺序

new version of FF changed order for attributes in input

本文关键字：属性 顺序 输入 改变 FF 新版本      更新时间：2023-09-26

我期望元素中属性的顺序可以改变，尽管html中的顺序(只有FF 43.0.1)。例子:

<input type="checkbox" data-type="can-be-also-empty"/>

请先在Chrome中运行片段，然后在FF中运行。

来自devtools的结果:

<input data-type="can-be-also-empty" type="checkbox"/> - FF

<input type="checkbox" data-type="can-be-also-empty"/> - Chrome

这可以通过使用angular来影响。自定义指令指南

Angular规范了元素的标签和属性名，以确定哪些元素匹配哪些指令

规范化过程如下:从元素/属性的前面去掉x和data。

这就是为什么我认为，如果data-type属性在元素中首先出现，角度剥离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的指令文档，它可以从type和data-type中匹配，所以当angular根据属性的顺序规范化数据类型时，它会覆盖之前的值(也就是checkbox)。

这种行为导致input[checkbox]永远不会像预期的那样工作，所以ngModel永远不会接收到选中字段的值。

最好的方法是不要使用这样的东西，不要使用符合angularjs规范化的属性

相关文章：