Question

使用此回购：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>

那不起作用。

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

1 个答案: