AngularJS wiele dyrektyw w HTML. Tylko jeden pojawia się

Question

Praca z tym repo: https://github.com/nkcraddock/angular-playing-cards

Poniższy kod działa i wyświetla listę wszystkich kart.

<div ng-controller="DemoCtrl" style="font-size: 0.45em;"> 
    <playing-card suit="{{card.suit}}" rank="{{card.rank}}" ng-repeat="card in Cards"/> 
</div> 

Na mojej stronie poniższy kod nie działa. Pojawia się tylko pierwsza karta. As.

<div> 
    <playing-card rank="ace" suit="spade" /> 
    <playing-card rank="king" suit="spade" /> 
</div> 

Ale poniższy kod działa. Pojawiają się obie karty. Dlaczego to?

<div> 
    <playing-card rank="ace" suit="spade" /> 
</div> 
<div> 
    <playing-card rank="king" suit="spade" /> 
</div> 
<div> 

Aby uzyskać pełny kod, należy sprawdzić transakcję repo. Ale dyrektywa jest poniżej, na wypadek gdyby pomogła.

return { 
    scope: { 
     rank: '=', 
     suit: '=' 
    }, 
    restrict: 'E', 
    // template: function(tElement, tAttrs) { 
    //  return ranks[tAttrs.rank].template; 
    // }, 
    link: function(scope, element, attrs) { 
     scope.rank = ranks[attrs.rank] || ranks.back; 
     scope.suit = suits[attrs.suit] || suits.heart; 
     element.replaceWith($compile(scope.rank.template)(scope)); 
    } 
}; 

Answer 1

Wyliczyłem ... Musisz zamknąć element dyrektywy.

<div> 
    <playing-card rank="ace" suit="spade"></playing-card> 
    <playing-card rank="king" suit="spade"></playing-card> 
</div> 

To działa.

<div> 
    <playing-card rank="ace" suit="spade" /> 
    <playing-card rank="king" suit="spade" /> 
</div> 

To nie działa.