AngularJS direttive multiple in HTML. Viene visualizzato solo uno

Question

Utilizzo di questo repository: https://github.com/nkcraddock/angular-playing-cards

In questa demo, il codice seguente funziona e viene visualizzato un elenco di tutte le schede.

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

Nella mia pagina, il seguente codice non funziona. Solo la prima carta si presenta. L'asso.

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

Ma il seguente codice funziona. Entrambe le carte appaiono. Perchè è questo?

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

Per il codice completo, controllare il repo. Ma la direttiva è sotto nel caso in cui aiuta.

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

capito ... È necessario chiudere l'elemento di direttiva.

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

Che funziona.

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

Che non funziona.