AngularJS如何從指令訪問JSON

Question

我寫了以下指令：

var gameOdds = function(){
    return {
        template: '{{games["@homeTeam"]}} vs {{games["@awayTeam"]}}',
        scope: {
            games: '@'
        }
    };
};

<div game-odds games="{{games}}">

這使用以下JSON數據（下面是json的一部分）：

{
    @id: "69486",
    @homeTeam: "Home Team",
    @awayTeam: "Away Team",
    otherNormalValues : {
        etc: "normal..."
    }
}

我知道直接將這些鍵放入綁定到控制器的HTML中時，選擇以@符號開頭的這些鍵的方法有效。 但是在我的指令中，我無法以["@field"]方式選擇字段。

有誰知道如何做到這一點？

Answer 1

可以使用=代替使用屬性對象表示法@ 。

演示

JAVASCRIPT

  .directive('gameOdds', function() {
    return {
      template: '{{games.homeTeam}} vs {{games.awayTeam}}',
      scope: {
        games: '='
      }
    }
  });

的HTML

<div game-odds games="games"></div>

更新：很抱歉收到的答復已提早，正如所接受的答復所提到的那樣，如果密鑰以特殊字符開頭，則可以使用[]表示法進行訪問：

  .directive('gameOdds', function() {
    return {
      template: '{{games['@homeTeam']}} vs {{games['@awayTeam']}}',
      scope: {
        games: '='
      }
    }
  });

Answer 2

作用域上的@符號會將您傳遞給屬性游戲的所有內容轉換為文本，並將其傳遞給指令。 如果使用=符號，則可以將范圍變量傳遞給指令。

使用@ ， scope.games將是一個字符串

使用= ， scope.games將是您的json對象

var gameOdds = function(){
    return {
        template: '{{games["@homeTeam"]}} vs {{games["@awayTeam"]}}',
        scope: {
            games: '='
        }
    };
};

<div game-odds games="games">