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

Question

使用此repo: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));
    }
};

Answer 1

想出来......你必须关闭指令元素.

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

这样可行.

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

这不起作用.