угловая директива с элементами списка

Question

Я пытаюсь перевести элементы списка в свою собственную директиву.

Шаблон моей 'список' пользовательская директива прост:

<ul> 
    <li>directive item</li> 
    <li>directive item</li> 
    <li>directive item</li> 
    <div ng-transclude><div> 
</ul> 

Затем я использую свою директиву, как так

<list> 
    <child-list></child-list> 
</list> 

шаблон childList просто:

<li>child item</li> 
    <li>child item</li> 
    <li>child item</li> 

однако конечный результат html все испорчен.

<ul> 
    <li>directive item</li> 
    <li>directive item</li> 
    <li>directive item</li> 
    <div ng-transclude> 
     <li>child item</li> 
     <li>child item</li> 
     <li>child item</li> 
    <div> 
</ul> 

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

Мой конечный результат я хочу

<ul> 
    <li>directive item</li> 
    <li>directive item</li> 
    <li>directive item</li> 
    <li>child item</li> 
    <li>child item</li> 
    <li>child item</li> 
</ul> 

Возможно ли это или я должен придумать решение CSS.

Заранее благодарен!

обновление довольствовался CSS решения сейчас

Answer 1

вы можете использовать нг-transclude как сам элемент. Это позволит сохранить дополнительные div и т. Д. Из вашего окончательного html. элемент ng-transclude по-прежнему будет присутствовать, но он будет «прозрачным» для браузера.

шаблон будет в конечном итоге выглядит так:

<ul> 
    <li>directive item</li> 
    <li>directive item</li> 
    <li>directive item</li> 
    <ng-transclude></ng-transclude> 
</ul> 

чек this fiddle В качестве примера

Answer 2

Потому что вы просите заменить ng-transclude элемент, вы можете создать вы собственную функцию transclude в методе link в директиве.

Во-первых, в вашем родительском шаблоне, вы можете создать «сменный» элемент пользовательского вместо ng-transclude элемента:

<script type="text/ng-template" id="parent.html"> 
    <ul> 
     <li>directive item</li> 
     <li>directive item</li> 
     <li>directive item</li> 
     <span class="replace"></span> 
    </ul> 
</script> 

---

Далее, включают способ ссылки в родительской директивы, которая находит custom replace элемент и заменяет его вашими зацепленными элементами. Обратите внимание, что вызовы transclude на его содержимое распаковываются. Подробнее об этом в следующем ...

myApp.directive('myDirective', function() { 
    return { 
     transclude: true, 
     templateUrl: 'parent.html', 
     replace: true, 
     link: function(scope, elem, attrs, ctrl, transclude) { 
      elem.find('.replace').replaceWith(transclude().contents().unwrap()); 
     } 
    }; 
}); 

---

Наконец, в своей директиве ребенка, установите заменить ложь, потому что Угловая жалуется, не имеющие корневой элемент. Метод transclude в родителе возвращает результаты дочерней директивы (с корневым элементом child-list). Итак, мы затем вскакиваем и разворачиваем содержимое (элементы списка); существенно заменяя элемент child-list.

myApp.directive('childList', function() { 
    return { 
     templateUrl: 'children.html', 
     replace: false 
    }; 
}); 

---

Я обновил jsFiddle here.