rossoneri rossoneri - 1 year ago 67
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
atributes going first in element, angular stripping
and it affecting

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'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src=""></script>

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

Next step, to move
. Now it is not working in any browser.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download