AngularJS - jak mieć dyrektywę z dynamiczną pod-dyrektywą

Naprawdę zmagam się z tym - próbowałem każdego możliwego sposobu. Mam nadzieję, że ktoś może pomóc.

Mam dyrektywę, która tworzy dla mnie zarys niestandardowej kontroli. Centralna część formantu niestandardowego ma być reprezentowana przez kolejną dynamicznie generowaną dyrektywę opartą na wartości zmiennej zasięgu w zewnętrznej dyrektywie. Zmienna zasięgu zawiera nazwę wewnętrznej dyrektywy. Robię to, ponieważ moja strona będzie miała wiele elementów generowanych dynamicznie, wszystkie ze wspólnym układem, ale inną zawartością wewnętrzną.

tj. przykład mojej zewnętrznej dyrektywy:

<div data-inner="{{inner}}">
    <!-- div content here --->
<div {{inner}} />

{{inner}} jest ustawiony na nazwę dalszej dyrektywy - w tym przypadkusearch. Dlatego moja strona powinna stać się:

<div data-inner="search">
    <!-- div content here --->
<div search />

zsearch na niższym div również zastępuje się treścią tej dyrektywy.

Jakieś pomysły?

AKTUALIZACJA Oto podstawowyjsFiddle reprezentujący problem, który mam - zauważ, że trzeci div nie jest wyświetlany.

questionAnswers(2)

yourAnswerToTheQuestion