Dynamically insert angular directive into HTML

Question

I have a number of directives in my angular module, these are named: MyDirective1, MyDirective2, ... , MyDirectiveN

I maintain a list of directive names as well: MyDirectiveList: ['MyDirective1', 'MyDirective2', ... , 'MyDirectiveN']

In HTML, I would like to display one of the directives based a variable (selectedDirective) which holds the directive name (either with ng-if or ng-show).

<div ng-repeat="directiveName in MyDirectiveList">

   <div ng-if="selectedDirective == directiveName">

   ...directive shall go in here...

   </div>

</div>

I could insert into the element using $injector and $compile in the controller but I wonder if there is more angular way of doing this directly in the html with angular directives.

Alburkerk · Accepted Answer · 2017-07-11 13:22:43Z

0

Since you are manipulating the DOM, you should do that with a directive.

Well, you may reply that ng-repeat and ng-if are directives as well, and you are right. But you are just currently calling an army because someone stole your wallet.

The best solution seems to be the one presented here, ie a directive to rule them all.

This solution is better for two reasons :

1) You are no longer theorically able to create and not display one thousand DOM object just for displaying one.

2) You can pass a custom json of data if your directives needs to (note that you can only pass it through a unique json and not adapt to the needs of you directives, ie multiple fields with smart two way data-biding).

answered Jul 11, 2017 at 13:22

Alburkerk

1,77215 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically insert angular directive into HTML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related