具有相同父代的角度多個指令元素

Question

如何才能做到這一點？

我提供了一個小提琴來證明我的問題：http://jsfiddle.net/FCAJD/

myApp.directive('tabs', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: '<ul ng-transclude></ul>' 
    } 
}); 

myApp.directive('tab', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<li>test</li>' 
    } 
}); 

和HTML：

<div ng-controller="MyCtrl"> 
    <tabs> 
     <tab /> 
     <tab /> 
     <tab /> 
     <tab /> 
    </tabs> 
</div> 

從本質上講，我想 「測試」 現身多次

Answer 1

你需要明確地終止指令。

所以不是：

<tab /> 
... 

你想：

<tab></tab> 
... 

Updated fiddle

你可以看到這個相關Angular github issue。從角鄉親（伊戈爾高塔）的一個此評論：

自閉或無效元素作爲HTML規範定義它們是非常特殊的 到瀏覽器的解析器。你不能自己做，所以對於你的自定義元素，你必須堅持使用非空元素（<foo></foo>）。