новая версия FF изменила порядок атрибутов во входных данных

#javascript #html #angularjs #firefox

#javascript #HTML #angularjs #firefox

Вопрос:

Я ожидал, что порядок атрибутов в элементах может быть изменен, несмотря на порядок в html (только FF 43.0.1). Пример:

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

Пожалуйста, запустите snippet в 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-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 . Теперь он не работает ни в одном браузере.

1. Порядок атрибутов не должен иметь значения

2. @adeneo пожалуйста, запустите последний фрагмент кода с примерами angular в FF и Chrome

3. У меня нет проблем с вашими фрагментами в любом браузере

4. @kicken пожалуйста, проверьте версию для FF, она должна быть 43.0.1

5. Я вижу, что атрибуты находятся в разном порядке в разных браузерах, но опять же, это не имеет значения, атрибуты не имеют указанного порядка.

Ответ №1:

Проблема заключается в том, как AngularJS соответствует директивам. В данном конкретном случае речь идет о том, что input[checkbox] совпадения происходят из type атрибута. Согласно AngularJS docs for directives, он может быть сопоставлен с обоими type и data-type , поэтому, когда angular нормализует тип данных, в зависимости от порядка атрибутов, он заменяет предыдущее значение (иначе checkbox ).

Такое поведение приводит к тому, что input[checkbox] никогда не работает должным образом, поэтому ngModel никогда не получает значение проверяемого поля.

Лучший подход — не использовать такую вещь, не использовать атрибуты, которые соответствуют нормализации angularjs.