Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the purpose of declaring the same directive twice in Angular?

While rewriting ng-include for my needs, I found that the direcive ngIncludeFillContentDirective, which is declared as ng-include like:

.directive({ngInclude: ngIncludeDirective}).directive({ngInclude: ngIncludeFillContentDirective})

You can see the ngInclude source here. And you can see the directive method being called as above here.

So, what is exactly the effect it has on the actual directive? Is it just applied as another directive? Does it have an special meaning?

like image 492
Zequez Avatar asked Oct 01 '22 11:10

Zequez


2 Answers

You can use the same name for multiple directives and all will be executed if you take a look at the source code for ngInclude ngInclude.js you will see that each directive has priority attribute. First one is 400 and last one is -400. Priority actually represents the order by which those directives of same name but different priorities will execute.

You can even attach your directive for some reason but add the lower priority to make sure it renders the required. Though overriding native ng- directives is not advisable.

like image 175
Ivan von Turkovich Avatar answered Oct 07 '22 17:10

Ivan von Turkovich


You second link is showing the compilation of the core angular directives. the .directive function the compile provider is built with $provide.provider('$compile', $CompileProvider).

Your first link shows the declaration of ngInclude and ngIncludeFillContentDirective. You can see that ngIncludeFillContentDirective depends on ngInclude.

I'm pretty sure that during the compilation, ngInclude would need to be compiled first, before ngIncludeFillContentDirective is compiled.

So, I believe this is chained with .directive to order the compilation process and build up the dependencies in the correct order.

EDIT:
So, here is the current source for $CompileProvider. There is a function on this object named directive. This is the function called in the OP.

You can see that if the parameter is not a string it calls this line on the parameter object:

forEach(name, reverseParams(registerDirective));

This essentially uses forEach to iterate the properties of the parameter object. forEach pulls the keys out of the object and then does this:

iterator.call(context, obj[key], key);

So, it only uses the value of the key.

I think what this boils down to is that the name of the property in the object (So, ngInclude in {ngInclude: ngIncludeFillContentDirective}) just has to be unique. The value of the property (ngIncludeFillContentDirective) is what is registered.

So, there doesn't seem to be any special meaning. At least none that I can find.

like image 25
Davin Tryon Avatar answered Oct 07 '22 18:10

Davin Tryon