What's the ANGULARJS instruction name?

Doubts

Looked up a lot of information, the introduction of the instruction name is a stroke, only said the hump form. However, when used in practice, it is often encountered that the defined instruction name does not correspond to the instruction label. The name of the instruction was very confusing. The name of the directive is a form when it is defined, and it is a form when used, how are they correlated?

Analysis Source

Can not find the information, self-check angular source code, a probe.

First, in the Angular.js file, find the code to parse the instruction name

Switch (nodeType)  {  case 1: /* Element */    //  use the node name: <directive>    //here is an instruction to parse the label form      adddirective (Directives,        directivenormalize ( Nodename_ (node). toLowerCase ()),  ' E ',  maxpriority, ignoredirective);     //  iterate over the attributes    for  (Var attr, name,  nName, ngAttrName, value, isNgAttr, nAttrs = node.attributes,              j = 0, jj = nattrs  && nattrs.length; j < jj; j++)  {       var attrstartname = false;      var attrendname =  false;      attr = nattrs[j];      if  (!msie | |  msie >= 8 | |  attr.specified)  {        name = attr.name;         value = trim (Attr.value);         // support ngAttr attribute binding         ngattrname = directivenormalize (name);         if   (Isngattr = ng_attr_binding.test (ngattrname))  {           name = snake_case (NGATTRNAME.SUBSTR (6),  '-');         }        var directiveNName =  Ngattrname.replace (/(start| End) $/,  ');        if  (Ngattrname === directivenname +  ' Start ')  {           attrStartName = name;           Attrendname = name.substr (0, name.length - 5)  +  ' End ';           name = name.substr (0,&NBSP;NAME.LENGTH&NBSP;-&NBSP;6);         }        // Here is the directive name         nname = directivenormalize in the form of the parse attribute ( Name.tolowercase ());        attrsmap[nname] = name;         if  (isngattr | |  !attrs.hasownproperty (nname))  {             attrs[nname] = value;            if  (Getbooleanattrname (node, nname))  {               attrs[nname] = true; // presence means  true            }         }        addattrinterpolatedirective (node,  directives, value, nname);         adddirective ( directives, nname,  ' A ', maxpriority, ignoredirective, attrstartname,                        attrendname);       }    }

The above one is the name of the instruction that resolves the label, called The Directivenormalize (nodename_ (node). toLowerCase ())

The other is the instruction name in the form of the parse attribute, called Directivenormalize (Name.tolowercase ())

toLowerCase () used in both places

So the parsing instructions ? First step: Convert the instruction name to lowercase . ?

Continue to see the directivenormalize () function

var prefix_regexp =/^ (x[\:\-_]|data[\:\-_])/i;/** * Converts all accepted directives format into proper directive name. * All of these'll become ' mydirective ': * my:directive * my-directive * x-my-directive * data-my:directive * * A LSO there is special case for Moz prefix starting with upper case letter. * @param name name to normalize */function directivenormalize (name) {return CamelCase (Name.replace (Prefix_regexp, '));}

It uses Name.replace (Prefix_regexp, '), which is the function of removing the prefix of x and data.

So the second step of the parsing instruction is to remove the prefix that begins with X and data-(for example, X-x: x_ data-data:data_ ignoring case)

Go ahead and look at the CamelCase () function

var special_chars_regexp =/([\:\-\_]+ (.)) /g;var moz_hack_regexp =/^moz ([A-z])/;var jqliteminerr = Minerr (' jqlite ');/** * converts snake_case to camelCase. * Also There is special case for Moz prefix starting with upper case letter.    * @param name name to normalize */function CamelCase (name) {return name.     Replace (Special_chars_regexp, function (_, separator, letter, offset) {return offset? Letter.touppercase (): letter;    }). Replace (moz_hack_regexp, ' moz$1 ');}

Using two replace substitution characters, the second replace does not have to tube, focus on the first replace, what does it do?

Take it out and see.

var special_chars_regexp =/([\:\-\_]+ (.))    /g;function CamelCase (name) {return name. Replace (Special_chars_regexp, function (_, separator, letter, offset) {Console.log ("_:" + _) Console.log ("Separa Tor: "+ separator) Console.log (" Letter: "+ letter) return offset?    Letter.touppercase (): letter; }).} Console.log ("----my-directive") Console.log (CamelCase (my-directive)), Console.log ("----mydirective") Console.log ( CamelCase (my-directive)) Console.log ("----Mydirectiveworld") Console.log (CamelCase (my-directive));/* Output content----My-directive_:-dseparator:-dletter: dmydirective----mydirectivemydirective----mydirectiveworldmydirectiveworld*/

You can see that the first replace function is to generate a hump instruction name

So the third step of parsing the instruction is to convert the character to the hump form according to the delimiter (:-_) Tag .

For a description of the Replace function, you can read this article

Http://yongqing.is-programmer.com/posts/56305.html

More examples of instruction names corresponding to directives

Take the delimiter "-" example MyMenu-mymenu correct MyMenu--mymenu error MyMenu--my-menu error MyMenu--my-menu correct MyMenu- MyMenu Error MyMenu--myMenu error MyMenu--x-mymenu correct MyMenu-myMenu error MyMenu-myMenu error myproducts Menu--My-products-menu correct Myproductsmenu--myproductsmenu error Myproductsmenu--My-productsmenu error

Summarize

The matching process of the instruction

1. Converts the instruction name to lowercase.

2. Remove prefixes beginning with x and data-(e.g. X-x: x_ Data-data:data_ ignoring case)

3. Converted to hump form according to the delimiter (:-_)

In fact, just note that the matching process is defined by the instruction name, the delimiter is used to identify the hump (angular is not able to recognize the word, a function of the separator is to identify the hump).