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

您可以使用@代替使用属性对象表示法=。

<强> DEMO

的 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">

AngularJS如何从指令访问JSON

2 个答案: