In AngularJS, how can I nest variable child directive(s) inside a parent directive?

Question

Introduction

For the project I am working on, I am trying to tackle a particular problem in the 'angular way', however I think I must be missing something because no matter what I try I continue to reach brick wall.

The crux of this issue is I am dynamically loading data from a backend that describes different components that are visible to the user. That's not the issue itself, but rather the issue of the particular & proper 'angular' way to turn a list of 'models' describing the components into actually rendered HTML.

Problem

What I am trying to create is basically the following:

Start off with a parent directive that uses ng-repeat for a scoped list called "models", which contains zero or more "components":

<parent-directive ng-repeat="model in models" model="model"></parent-directive>

The ng-repeat directive creates N copies of that original directive with different 'model' arguments (for each object in the $scope.models array).

// this is just for demonstrative purposes, it obviously looks different in source
<parent-directive model="child1"></parent-directive>
<parent-directive model="child2"></parent-directive>
<parent-directive model="child3"></parent-directive>

issue! => The parentdirective gets transformed into a specific child directive depending on data (in this case, called 'type') contained within the javascript object:

<parent-directive model="..."></parent-directive>

turns into

<child-directive-one model="..."></child-directive-one>

or

<child-directive-two model="..."></child-directive-two>

dependent on what the value 'model.type' is.

The child directive then renders into it's own custom HTML (outside the scope of this problem) using data passed to it. If we continued the example from above, that HTML should render into the following (hopefully):

<child-directive-one model="child1"></child-directive-one>
<child-directive-one model="child2"></child-directive-one>
<child-directive-two model="child3"></child-directive-two>'

Followed by (and this is outside the scope of the issue but just to see it through to the end) each directive rendering into its own HTML:

<div>in childDirectiveOne, text is: This is text contained inside child1</div>
<div>in childDirectiveOne, text is: This is text contained inside child2</div>
<div>in childDirectiveTwo, text is: This is text contained inside child3</div>

Source

I've been trying lots of different variations of things to try and get it to work (involving the link function, using $compile, etc), but this source is provided with all of those attempts stripped out. Here's the source I've developed so far:

removed source (was filled with errors). Solution that Scott helped me out with is below:

Conclusion

Thanks for any advice in advance.

Update :

Solution exists here (thanks again to Scott).

Answer 1

I'm not sure exactly why you can't just have a single directive, however something like the following might work. Instead of repeating the parent directive you just pass in the models and have that directive repeat and create each of the child directives.

      <parent-directive the-models="models"></parent-directive>

Parent directive template:

       <div ng-repeat="model in models"....>
          <child-directive  ng-if="YOUR CONDITION"></child-directive>
          <child-directive2 ng-if="YOUR CONDITION"></child-directive>

       </div>