HTML中的AngularJS多个指令。只有一个出现

使用此仓库：https : //github.com/nkcraddock/angular-playing-cards

在该演示中，以下代码有效，您将看到所有卡的列表。

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

在我的页面中，以下代码不起作用。仅显示第一张卡片。王牌。

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

但是以下代码可以工作。两张卡都显示。为什么是这样？

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

有关完整代码，请检查回购。但是该指令在下面以防万一。

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));
    }
};