如何在 Angular ng-Repeat 中动态设置 Zingchart 属性

Question

使用 AngularJS，我正在尝试构建一个页面，该页面具有为数组中的每个对象动态生成的不同 Zingchart。我的问题是——因为数据和变量名称是在页面加载时在我的控制器中动态生成的——我不确定如何在 Zingchart 指令中正确引用它们。

在我的控制器中，变量是如何动态生成的：

function getWeeklyNflLines(){
  oddsService.getWeeklyNflLines($stateParams.weekNumb).then(function(games){
    vm.nflLines = games;
    for (i=0; i<vm.nflLines.length; i++){
      $scope[vm.nflLines[i].AwayAbbrev] = { [Zingchart json configuration goes here] }
    }
  }
}

然后，在我尝试制作 Zingchart 的地方，我有：

<div ng-repeat="game in vm.nflLines>
  <div zingchart zc-json="{{game.AwayAbbrev}}" zc-width="100%" zc-height="350px"></div>
</div>

所以回顾一下：我在控制器中设置了“AwayAbbrev”$scope 变量——它应该对应于我的 ng-repeat 中的“game.AwayAbbrev”——但是当我尝试这样做时，我收到以下错误在我的浏览器中：

angular.js:13550 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{game.AwayAbbrev}}] starting at [{game.AwayAbbrev}}].

我尝试将 zc-json 属性更改为 ng-attr-zc-json 以尝试对其进行插值，但这不起作用。

知道我该如何做到这一点吗？提前感谢您的帮助！

====

编辑：我应该提到我还尝试完全删除花括号（例如，zc-json="game.AwayAbbrev"），尽管这解决了错误，但它没有返回任何数据。

===

编辑#2：请参阅下面 Tjaart 的回答，因为这解决了我的问题。我会注意到我的代码中还有一个与我原来的问题无关的错误；我需要包含一个 id 作为 Zingchart 属性，我在我的 ng-repeat 中按索引递增。所以最后一段代码是这样的：

<div zingchart id="pick-chart[{{$index}}]" zc-json="nflLines[game.AwayAbbrev]" zc-width="100%" zc-height="350px"></div>

Answer 1

您可以尝试将它们添加到单独的属性上，而不是直接在 $scope 上创建 json 对象：

$scope.nfLines = {};

function getWeeklyNflLines(){
  oddsService.getWeeklyNflLines($stateParams.weekNumb).then(function(games){
    vm.nflLines = games;
    for (i=0; i<vm.nflLines.length; i++){
      $scope.nfLines[vm.nflLines[i].AwayAbbrev] = { [Zingchart json configuration goes here] }
    }
  }
}

然后您可以将您的 HTML 更新为以下内容：

<div ng-repeat="game in vm.nflLines>
  <div zingchart zc-json="nfLines[game.AwayAbbrev]" zc-width="100%" zc-height="350px"></div>
</div>

Answer 2

你只需要在没有双花括号的情况下使用它，就像这样

<div ng-repeat="game in vm.nflLines>
  <div zingchart zc-json="game.AwayAbbrev" zc-width="100%" zc-height="350px"></div>
</div>