Starting an HTML attribute in Angular with the letter "x" is not permitted

Question

Starting an HTML attribute in Angular with the letter "x" is not permitted

After working with Angular 1.5.6 components, I came across a peculiar discovery. I have a component named scale which I call using the following syntax:

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

In my controller, I set:

$scope.xScale = 'lin'.

Here's how I defined my component:

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

            },
            bindings: {
              xScale: '='
            },
    });

Surprisingly, when checking the console log, it showed undefined.

However, by simply changing x-scale to r-scale in the template and updating xScale in the binding to rScale, everything worked perfectly. Strangely enough, substituting the letter x with any other also made it work flawlessly. What could be causing this behavior?

javascript angularjs

Answer 1

Answer №1

The information regarding directives can be found in the guide dedicated to directives.

Normalization

Angular performs normalization on an element's tag and attribute name to match them with directives.
Directives are usually referenced using their case-sensitive camelCase normalized names (e.g. ngModel).

Although HTML is not case-sensitive, directives are referred to in the DOM in lowercase format, often using dash-separated attributes on DOM elements (e.g. ng-model).

The normalization process unfolds as follows:

Remove x- and data- prefixes from element/attribute names.

Convert the name separated by :, -, or _ into camelCase.

Angular removes the x- prefix from the beginning of any attribute name for normalization purposes. This is because both standard data-attributes, starting with data-, and x-attributes, starting with x-, are valid in HTML 5.

As per the HTML5 specification:

Attributes starting with "x-" are reserved for use by user agents and will never be formally added to the HTML language.

The specification also mentions that:

Extensions intended for use with HTML syntax should be limited to new attributes in the form "x-vendor-feature", where vendor denotes the name of the extending party and feature represents the feature itself.

While x- attributes may not see much usage, they are designated for browser vendors according to specifications. It is advised against using them; instead, opt for data-attributes. Angular will automatically eliminate the data- part for you as well. Thus,

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

all hold the "same" meaning when applying

$scope.scale = 'lin'.

Answer 2

The information regarding directives can be found in the guide dedicated to directives.

Normalization

Angular performs normalization on an element's tag and attribute name to match them with directives.
Directives are usually referenced using their case-sensitive camelCase normalized names (e.g. ngModel).

Although HTML is not case-sensitive, directives are referred to in the DOM in lowercase format, often using dash-separated attributes on DOM elements (e.g. ng-model).

The normalization process unfolds as follows:

Remove x- and data- prefixes from element/attribute names.

Convert the name separated by :, -, or _ into camelCase.

Angular removes the x- prefix from the beginning of any attribute name for normalization purposes. This is because both standard data-attributes, starting with data-, and x-attributes, starting with x-, are valid in HTML 5.

As per the HTML5 specification:

Attributes starting with "x-" are reserved for use by user agents and will never be formally added to the HTML language.

The specification also mentions that:

Extensions intended for use with HTML syntax should be limited to new attributes in the form "x-vendor-feature", where vendor denotes the name of the extending party and feature represents the feature itself.

While x- attributes may not see much usage, they are designated for browser vendors according to specifications. It is advised against using them; instead, opt for data-attributes. Angular will automatically eliminate the data- part for you as well. Thus,

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

all hold the "same" meaning when applying

$scope.scale = 'lin'.

Starting an HTML attribute in Angular with the letter "x" is not permitted

Answer №1

Similar questions

Using jQuery effects on your PHP message to give it an interactive touch - here's how!

Efficiently writing to response from MongoDB in JSON format without blocking the execution

Inspect the variable in JavaScript and then increment it by one every second

When the button is clicked, a modal will pop up

Duplicate the canvas onto a new canvas

The display/block feature will only function if the div element is contained within a table

Updating checkboxes in Vue.js

How is it that a callback function can successfully execute with fewer arguments provided?

A guide on replacing certain characters with spaces using AngularJS

Tips on incorporating an AJAX post request in your code

The fluid jumbotron in react-bootstrap is not extending to the entire width of the webpage

Generating VueJS Syntax from JSON Data

Phonegap app failing to run Ajax request properly

Obtain the position of a value within an array that has been grouped together

Interactive tooltip feature in Apexchart

Navigating through this object with PUG and Express: a step-by-step guide

How to modify browser's back button action in Vue.js

Unable to create an intersection between two arrays that are nested within each other

Utilizing Rails' remote: true feature to prevent the webpage from refreshing

How can I retrieve the element to which the jQuery plugin was attached?