Various formats of referencing directives in angularJS

We can use a variety of naming conventions to refernce directives in HTML markup . In Angular JS all the directives are accessed in modules as camel case like 'ngResource' or 'ngModel' .
But in an HTML template, there are various methods to access the directive . Like for ngModel ,  we need to use either snakecase form (ng-model), colon-separated (ng:model) or the underscore-separated (ng_model) form. Additionally, each reference to a directive can be prefixed with either x
or data.

So, to say , the combinations we can use are ::

ng-model, ng:model, ng_model, x-ng-model,

x-ng:model, x-ng_model, data-ng-model, data-ng:model,

data-ng_model, x:ng-model, data_ng-model, and so on.

The functionality of all of these are equivalent , however they hold some meaning behind there naming conventions .

The data prefix for example is used to for keeping our HTML documents HTML5-compliant, and making them pass HTML5 validators tests.
The HTML5 spec allows for arbitrary attributes as long as they're prefixed with data- , ex:

<div data-customattribute=""> </div>

works fine , but

<div myattribute=""> </div>

  

will become invalid html .

A custom data attribute according to html 5 specs is basically  an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

If you are wondering how to make something XML-compatible, follow this link : XML-Compatible

These custom attributes are private to the page and can be used only in that scope, and connot be accessed by external software.

Now, to see an example of custom attribute, suppose you want to sort songs by the length of its track (this example is given in w3 site) , then you can create a custom attribute like :

<li data-tracklength="3m2s">Some Song</li>

this attribute can be used to sort the songs according to there length, or filter tracks according to track length in the site itself .


Now, to talk about the x- or x: attribute, as you can guess, it is used to make documents XHTML compliant , like :

<div x:attribute=""></div>

However, XHTML is not so popular these days .


I could not find any difference in semantics between snakecase model, colon-sparated model . Maybe it was just created for ease of people of different coding styles.

Hope, this clears something . Do update any relevant information in the comments .

Thanks :)