rossoneri rossoneri - 1 month ago 9
HTML Question

new version of FF changed order for attributes in input

I have expected that order for atributes in elements can be changed despite the order in html (only FF 43.0.1). Example:



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





Please, run snippet in Chrome an then in FF.

Result from devtools:

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

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

This can be affected with using 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.


Thats why i think, if
data-type
atributes going first in element, angular stripping
data-
and it affecting
type="checkbox"
to
type="can-be-also-empty"
.

Next snippet can show better, what i mean:



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>





Also try to run it in FF and Chrome, expression will not be evalueted in FF.

Next step, to move
data-type="eny-value"
before
type
. Now it is not working in any browser.

Answer

The problem comes from how AngularJS matches directives. In this particular case, it's about input[checkbox] it's matches comes from the type attribute. According to AngularJS docs for directives, it can be matched from both type and data-type, so when angular normalize the data-type, depending on the order of the attributes, it overides de previous value (aka checkbox).

This behaviour causes input[checkbox] to never works as how it should, then it's ngModel never receive a value of the checked input.

The best approach is to not use such thing, don't use attributes that matches with angularjs normalization.