Угловые обертывания вставляемые элементы отдельно?

Question

Я довольно новый с Угловым. И хотя я добился большого прогресса, все еще есть пара вещей, которые я не знаю.

В настоящее время я сталкиваюсь с проблемой «Заключение».

В принципе, мы хотим, чтобы каждый выделенный элемент/директива был разделен html, который контролируется родительской директивой.

Пример:

<my:directive> 
    <my:sub-directive>Child 1</my:sub-directive> 
    <my:sub-directive>Child 2</my:sub-directive> 
    <my:sub-directive>Child 3</my:sub-directive> 
</my:directive> 

Желаемый результат (я оставил элементы директивы, чтобы сделать пример немного более четкий):

<my:directive> 
    <ul> 
     <li> 
      <div class="panel"> 
       <div class="header"> 
        // Some stuff that's controlled by my:directive comes here 
       </div> 
       <div class="content"> 
        <my:sub-directive>Child 1</my:sub-directive> 
       </div> 
      </div> 
     </li> 
     <li> 
      <div class="panel"> 
       <div class="header"> 
        // Some stuff that's controlled by my:directive comes here 
       </div> 
       <div class="content"> 
        <my:sub-directive>Child 2</my:sub-directive> 
       </div> 
      </div> 
     </li> 
     <li> 
      <div class="panel"> 
       <div class="header"> 
        // Some stuff that's controlled by my:directive comes here 
       </div> 
       <div class="content"> 
        <my:sub-directive>Child 3</my:sub-directive> 
       </div> 
      </div> 
     </li> 
    </ul> 
</my:directive> 

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

Answer 1

Вы можете передать пятый параметр функции transclude ссылку вашей директивы, а затем сделать ваши манипуляции там, вот краткий пример:

angular.directive('myDirective', function ($compile) { 
    return { 
     restrict:'EA', 
     transclude:true, 
     link: function (scope, elm, attrs,ctrl,transclude) { 
      transclude(scope,function(clone) { 
       //clone is an array of whatever is inside your main directive 
       clone.filter('mySubDirective').each(function(index, value){ 
        //create your html and you might have to $compile it before: 
        elm.append(myHtml);      
       }); 
      }); 
     } 
    }; 

})