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

Question

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

在我的 Controller 中，以下是动态生成变量的方式:

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>

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

angular.js:13550 错误:[$parse:syntax] 语法错误:从 [{game.AwayAbbrev] 开始的表达式 [{{game.AwayAbbrev}}] 第 2 列处的 token “{”无效键}}]。

我尝试将 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>