각도 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'$ 범위 변수를 설정합니다.이 변수는 내 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}}].

시도해 보려고 ng-attr-zc-json으로 zc-json 속성을 변경해 보았지만 작동하지 않았습니다.

어떤 방법으로 달성 할 수 있습니까? 어떤 도움을 주셔서 미리 감사드립니다!

====

편집 : 나는 또한 모두 중괄호를 제거하려고 것을 언급한다 (예, ZC-JSON = "game.AwayAbbrev")는이 있지만 오류 그것을 처리했다 데이터를 반환하지 않았습니다.

===

편집 # 2 :이 내 문제를 해결로 아래 Tjaart의 답변을 참조하시기 바랍니다. 내 원래 질문과 무관 한 내 코드에는 하나의 추가 오류가 있음을 알 수 있습니다. 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>