I am currently developing an Angular 1 application where I need to invoke different directives based on a specific value within an ng-repeat loop. As of now, I am using ng-if to render the directive that matches the condition. However, my concern is that as the number of directives grows to potentially 100 in the future, having to use multiple ng-if statements for each one may not be the most efficient approach.
Below is a snippet of my code:
Template calling the directive
<render-directive ng-if="data.length !== 0" data="data"></render-directive>
Template of renderDirective
<div ng-repeat="element in data">
<div ng-if="element.item === 'motor'">
<render-motor motor-id="element.id" name="element.item"
checked="element.params.switch"></render-motor>
</div>
<div ng-if="element.item === 'adc'">
<render-adc adc-id="element.id" name="element.item"></render-adc>
</div>
</div>
While only two directives are shown here for simplicity, in reality, I am already utilizing more than 10 directives with the potential for this number to reach 100.
Is there a more efficient way to handle this situation without using ng-if for every single directive?
Please let me know if any part of my question requires further clarification.
UPDATE
To clarify my requirements, I have an array containing items with a 'item' property, and I want to dynamically call a directive based on this property. For example,
- for item = "motor", I need to utilize the motorDirective
- for item = "switch", I should employ the switchDirective
- for item = "led", I ought to make use of the ledDirective
and so forth.