Question

我原本预计，尽管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

使用角度可能会影响这一点。 Custom directives guide

Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配

规范化过程如下：从元素/属性的前面剥离x-和数据。

这就是为什么我认为，如果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。现在它无法在任何浏览器中运行。

Answer 1

问题来自AngularJS如何匹配指令。在这种特殊情况下，它的input[checkbox]匹配来自type属性。根据{{3}}，它可以从type和data-type进行匹配，因此当角度规范化数据类型时，根据属性的顺序，它会覆盖de previous值（aka checkbox）。

此行为导致input[checkbox]永远不会按预期工作，因此ngModel永远不会收到已检查字段的值。

最好的方法是不使用这样的东西，不要使用与angularjs规范化匹配的属性。

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

1 个答案: