Cannot use letter x to trigger html attribute in Angular

Question

I noticed something very strange regarding the components of Angular 1.5.6. I have a component called scale. I call it:

<scale x-scale="xScale"></scale> 

And in my controller:

 $scope.xScale = 'lin'. 

And my component definition:

 angular .module('myapp') .component('scale', { templateUrl: 'analyse/components/scales/scale.tpl.html', controller: function(){ console.log('in controller and this is ', this); }, bindings: { xScale: '=' }, }); 

The console log output is undefined.

But if I change x-scale to r-scale in my template and xScale in relation to rScale , it suddenly works. It actually seems that if I replace x with any other letter, it will work. Why is this?

Answer 1

In the documentation for directives

Normalization

Angular normalizes the element tag and attribute name to determine which elements correspond to these directives.
We usually refer to directives by their normal camelCase case-sensitive name (e.g. ngModel).

However, since HTML is case-insensitive, we refer to lowercase DOM directives, usually using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

• Reset x- and data - on the front of the element / attributes.
• Convert : - or _ -delimited name to camelCase.

So Angular strips x- from the front of any attribute name to normalize it, this is because both ordinary data attributes, starting with data- , and x-attributes, starting from x- , are valid in HTML 5.

the HTML5 specification states that

Attribute names starting with two " x- " characters are reserved for user agent use and are guaranteed never to be formally added to the HTML language.

It also states that

For markup-level functions intended for use with HTML syntax, extensions should be limited to new attributes of the " x-vendor-feature " form, where the provider is a short string that identifies the provider responsible for the extension, and the function is the name of the feature.

The x- attributes are not used very often, but, as noted above, they are reserved for browser providers, and you should not use them, instead you should use data attributes, where, by the way, Angular will also delete the data- part for you, so these

 <scale data-scale="scale"></scale> <scale x-scale="scale"></scale> <scale scale="scale"></scale> 

all are the same when you do

 $scope.scale = 'lin'.