В AngularJS, как я могу вложить директиву переменной child в родительскую директиву?

Question

Введение

Для проекта я работаю, я пытаюсь решить ту или иную проблему в «угловом пути», но я думаю, что я должен быть что-то не хватает, потому что независимо от того, что я стараюсь я продолжаю достигать кирпичная стена.

Суть этой проблемы заключается в том, что я динамически загружаю данные из бэкэнд, который описывает различные компоненты, которые видны пользователю. Это не сама проблема, а проблема конкретного «углового» способа превратить список «моделей», описывающих компоненты в фактически визуализированный HTML.

Проблема

То, что я пытаюсь создать в основном следующее:

начать с родительской директивой, которая использует нг-повтор для контекстного списка под названием «модель», которая содержит ноль или больше «компоненты»:

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

нГ-повтор директива создает N копий этой оригинальной директивы с аргументами разных «модель» (для каждого объекта в $ scope.models массива).

// 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> 

вопрос! => parentdirective преобразуется в определенную директиву ребенка в зависимости от данных (в данном случае называется 'тип'), содержащийся в JavaScript Object:

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

превращается в

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

или

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

в зависимости от того, что такое значение 'model.type'.

Директива child затем превращается в собственный HTML-код (вне сферы действия этой проблемы), используя данные, переданные ему. Если мы продолжили пример из выше, что HTML должен вынести в следующее (надеюсь):

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

Вслед за (и это выходит за рамки данного вопроса, но только, чтобы увидеть его до конца) каждую директиву рендеринга в свой собственный 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> 

Источник

Я пытался много различных вариантов вещей, чтобы попытаться получить его на работу (включая функции связи, используя $ компилировать, и т.д.) , bu t этот источник предоставляется со всеми этими попытками. Вот источник я разработал до сих пор:

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

Заключение

Спасибо за любые советы заранее.

Update:

Solution exists here (thanks again to Scott).

Answer 1

Я не знаю точно, почему вы не можете просто иметь одну директиву, однако что-то вроде следующего может работать. Вместо того, чтобы повторять родительскую директиву, вы просто проходите в моделях и повторяете эту директиву и создаете каждую из дочерних директив.

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

шаблон директива Родитель:

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

     </div>