How is this custom tag configured?

Question

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 ?

Answer 1

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

Answer 2

frang-tree-repeat is a custom directive which is defined in a module app.directives in angular-treeRepeat . As @dfsq pointed out, its implementation can be found here .

Note that it requires frangtree in its definition require: ^frangTree :

When a directive uses this option, $compile will throw an error unless the specified controller is found. The ^ prefix means that this directive searches for the controller on its parents (without the ^ prefix, the directive would look for the controller on just its own element).