Search code examples
angularjsconfigurecustom-tag

How is this custom tag configured?

I'm using this library https://github.com/tchatel/angular-treeRepeat

So to create a list of nodes this syntax is used : 

<li frang-tree-repeat="node in treeData>

frang-tree-repeat is a custom tag and so it has to be configured somewhere within the library ?

Searching the src of https://github.com/tchatel/angular-treeRepeat I do not see any references to frang-tree-repeat so how is this tag configured or in other words how is frang-tree-repeat interpreted ?

Solution

  • Angular normalizes directive (both attribute and tag) names from kebab-case to camelCase. This is necessary since names of HTML tags and attributes are better written in kebab-case (because names are not case sensitive in HTML) while in Javascript kebab-case names would not be valid identifiers and could not be used for directives names (well, they could, but it would require additional wrapping into quotes).

    That's the reason why you have to preform normalization from HTML notation to JS. Angular has $normalize service which is used for this. So it means, that if in HTML you have frang-tree-repeat it will be translated to frangTreeRepeat in Javascript.

    In your case, your directive is found here: https://github.com/tchatel/angular-treeRepeat/blob/master/app/js/directives.js#L18