javascript - 具有多个选项的 Angular Directive(指令)

Question

我刚刚在 http://plnkr.co/8gJdFrEiplMO7FzOq9Sm 创建了一个 plunkr 示例

我的问题是，为什么我的playerHtml指令没有得到任何输出？

我的玩家指令如下所示

app.directive('playerHtml', function() {
  return {
    restrict: 'A',
    scope: {
      player: '=',
      bold: '=',
      wintype: '='
    },
    templateUrl: 'player.html'
  }
});

和模板

<span ng-if="bold == 1" class="playername winner">{{ player.name }} - {{ player.email }} - {{ wintype }}</span>
<span ng-if="bold == 2" class="playername loser">{{ player.name }} - {{ player.email }} - {{ wintype }}</span>

以及对该指令的调用

<span ng-if="game.winner == 1" player-html player="{{ game.player1 }}" bold="1" wintype="{{ game.wintype }}"></span>
<span ng-if="game.winner != 1" player-html player="{{ game.player1 }}" bold="0" wintype="{{ game.wintype }}"></span>

<span ng-if="game.winner == 2" player-html player="{{ game.player2 }}" bold="1" wintype="{{ game.wintype }}"></span>
<span ng-if="game.winner != 2" player-html player="{{ game.player2 }}" bold="0" wintype="{{ game.wintype }}"></span>

Answer 1

使用 {{}} 是错误的，您正在使用双向绑定(bind)将数据传递给指令，您需要传递一个被求值的表达式，而不需要 {{}}。

http://plnkr.co/edit/x3I0PTqA0VZB05pFC3vx?p=preview

<span ng-if="game.winner == 1" player-html player="game.player1" bold="1" wintype="game.wintype"></span>
<span ng-if="game.winner != 1" player-html player="game.player1" bold="0" wintype="game.wintype"></span>

<span ng-if="game.winner == 2" player-html player="game.player2" bold="1" wintype="game.wintype"></span>
<span ng-if="game.winner != 2" player-html player="game.player2" bold="0" wintype="game.wintype"></span>