Zagnieżdżona dyrektywa transclude renderuje wewnętrzną, translatowaną treść w niewłaściwym miejscu - javascript, angularjs, angularjs-directive, angularjs-ng-transclude

mam myList dyrektywy, która przetwarza treść. Problem występuje, gdy próbuję zagnieździć <my-list> element wewnątrz innego <my-list>.

JS Fiddle: http://jsfiddle.net/fqj5svhn/

Dyrektywa:

var MyListDirective = (function () {
function MyListDirective() {
this.restrict = "E";
this.replace = true;
this.transclude = true;
this.scope = {
myListType: "="
};
this.controller = function () {
this.classes = "my-class";
};
this.controllerAs = "myList";
this.bindToController = true;
this.template = "<ul ng-class="myList.classes" ng-transclude></ul>";
}
return MyListDirective;
})();
angular.module("myApp", []).directive("myList", function () {
return new MyListDirective();
});

Przykładowe zastosowanie dyrektywy:

<div ng-app="myApp">
<my-list my-list-type=""someType"">
<li>foo</li>
<li>bar</li>
<li>
<my-list my-list-type=""anotherType"">
<li>cats</li>
<li>dogs</li>
</my-list>
</li>
</my-list>
</div>

Co jest renderowane:

<div ng-app="myApp" class="ng-scope">
<ul ng-class="myList.classes" ng-transclude="" my-list-type=""someType"" class="ng-isolate-scope my-class">
<li class="ng-scope">foo</li>
<li class="ng-scope">bar</li>
<li class="ng-scope">
<ul ng-class="myList.classes" ng-transclude="" my-list-type=""anotherType"" class="ng-isolate-scope my-class">
</ul>
</li>
<li class="ng-scope">cats</li>
<li class="ng-scope">dogs</li>
</ul>
</div>

Jak widać elementy listy od wewnątrz myList wydają się być transcluded przez zewnętrzne myList. Co chcę zrobić:

<div ng-app="myApp" class="ng-scope">
<ul ng-class="myList.classes" ng-transclude="" my-list-type=""someType"" class="ng-isolate-scope my-class">
<li class="ng-scope">foo</li>
<li class="ng-scope">bar</li>
<li class="ng-scope">
<ul ng-class="myList.classes" ng-transclude="" my-list-type=""anotherType"" class="ng-isolate-scope my-class">
<li class="ng-scope">cats</li>
<li class="ng-scope">dogs</li>
</ul>
</li>
</ul>
</div>

Propozycje?

Odpowiedzi:

Dzieje się tak, ponieważ gdy przeglądarka renderuje stronę, której oczekuje <li> być w środku <ul>, ale twój przypadek jest w środku <my-list> który jest nieprawidłowym znacznikiem. Wszystkie te rzeczy dzieją się przed Angular bootstraps i uruchamia dyrektywy. Nie ma możliwości przewidywania, w jaki sposób przeglądarka zinterpretuje Twój znacznik, gdy będzie nieprawidłowy, w tym konkretnym przypadku popycha <li>"być razem.

W tym skrzypce Wymieniłem <ul> i <li> z <div>, który nie ma żadnych wymagań dotyczących zagnieżdżania, a transclusion działa dobrze.