2017-02-15 6 views
1

これは私のコードです:構文エラー:[{id}}]から式[{{id}}]の列2のトークン '{'キーが無効ですか?

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <script src="js/angular.js"></script> 
 
    <script src="js/Chart.min.js"></script> 
 
    <script src="js/angular-chart.js"></script> 
 
</head> 
 
<body> 
 

 
<div ng-app="app"> 
 
    <div ng-controller="BarCtrl"> 
 
     <div ng-repeat="id in ids"> 
 
      <canvas id="bar" class="chart chart-bar" 
 
        chart-data="{{id}}" chart-labels="labels"> chart-series="series" 
 
      </canvas> 
 

 
     </div> 
 
    </div> 
 
</div> 
 

 
<script type="application/javascript"> 
 

 
    angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) { 
 
     $scope.labels = ['2008', '2009', '2010', '2011', '2012']; 
 
     $scope.series = ['Series A', 'Series B']; 
 

 
     $scope.data = []; 
 
     $scope.data.push([ 
 
      [65, 59, 80, 81, 56, 55, 40], 
 
      [28, 48, 40, 19, 86, 27, 90] 
 
     ]); 
 

 
     $scope.ids = ["data[0]"]; 
 
    }); 
 

 
</script> 
 
</body> 
 
</html>

私はChromeでコードを実行すると、コンソールが書いた:

[$parse:syntax] Syntax Error: 
    Token '{' invalid key at column 2 of the expression [{{id}}] starting at [{id}}]. 

<input value="{{id}}">はOKのようですが、chart-data="{{id}}"を引き起こしています構文エラー。それがどうして起こるのか?

答えて

4

には式を含めるべきではありません。スコープ変数バインディングを持つ必要があります。

<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"> 
</canvas> 

{{ ... }}を使用すると、たとえば{{1+1}}や印刷(通らない){{id}}変数のため、式を評価していることを意味します。しかし、変数を渡すには、変数をプロパティに代入するときに式にラップするべきではありません。

関連する問題