角度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> 

私はng-repeat内の 'game.AwayAbbrev'に対応する必要があるコントローラーに 'AwayAbbrev' $スコープ変数を設定しましたが、これを実行しようとするとブラウザに次のエラーが表示されます：

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

ng-attr-zc-jsonにzc-json属性を変更して補間しようとしましたが、動作しませんでした。

これをどのように達成することができますか？助けをあらかじめありがとう！

====

編集：私はまた、完全に中括弧を削除しようとしたことに言及している必要があります（例えば、ZC-JSON =「game.AwayAbbrev」）は、このかかわらず、エラー、それの世話をしましたデータを返しませんでした。

===

EDIT＃2：これは私の問題を解決して、以下のTjaartの回答を参照してください。私は元の質問と無関係に私のコードに1つの追加エラーがあったことに注意します。 Zingchart属性としてidを含める必要がありました。これはインデックスでng-repeat内で増分しました。だから、コードの最後のピースは、このように見えた：

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

Answer 1

のように、二重の中括弧なしでそれを使用する必要があることが私のあなた別のプロパティにそれらを追加するか試すことができます。

$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

はあなただけ$scopeに直接jsonオブジェクトを作成するのではなく、この

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