angular-chart.jsプロバイダとインジェクタが動作しない

Question

私は現在のプロジェクトでangular-chart.jsをテストしようとしていますが、インストール段階を過ぎたことはありません。 angular-chart.js site（特に円グラフの例）に記載されている指示に従って、すべてのコンポーネントに適切な依存関係を追加しましたが、まだエラーが発生しています。私が知ることができる最良のことは、他の依存関係との葛藤、または間違った順序で注射を呼んだことです。ここで

は私app.jsです：

angular.module("datapoint", ['ngSanitize', 'ngCsv', 'chart.js', 'angular-chart.js']); 

ここでは私のキャンバスタグはHTMLにあります：

<canvas id="pie" width="300" height="300" class="chart-canvas chart chart-pie" chart-data="getPieChartData" chart-labels="getPieChartLabels" chart-options="options"></canvas> 

は、ここに私のコントローラ、datapointController.jsの始まりです：

var datapoint = angular.module('datapoint', ['ngCookies', 'ngCsv', 'chart.js']); 
datapoint.controller('datapointController', 'PieCtrl', ['$scope', 'datapointFactory', '$cookies', function ($scope, datapointFactory, $cookies) { 

そして、良い対策のために、ここで私はすべてのスクリプトを私のHTML：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-cookies.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-csv/0.3.6/ng-csv.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> 
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> 
<script src="app.js"></script> 

アンギュラchart.jsサイト上の指示に従っているにもかかわらず、私はまだ、このエラーが出る：

エラー：ngの：

Argument 'datapointController' is not a function, got string

悪い引数をAREQこの前に実行して、私はそれがPieCtrlの配置だと考えましたが、別の場所でその周りを移動するだけで、異なるエラーが作成されます。 datapointController.jsにモジュールに'angular-chart.js'の追加

だけで、ページ全体が空白行かせるとエラーが作成されます。

エラー：$インジェクター：modulerrモジュールエラー

Failed to instantiate module datapoint due to: Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=a...)

そして、別のエラーI私の手抜きで実行されて：

エラー：$ injector：unpr Unkn PieCtrlProviderは私が提供しなければならなかった別の引数であれば自分のプロバイダ

Unknown provider: PieCtrlProvider <- PieCtrl <- datapointController

そして、私は確認されませんでした。いずれにしても、私は、angle-chart.jsの例に従っているように見えますが、私のサイトの他のものに対しては余分な依存関係が追加されています。

ありがとうございます。

Answer 1

Raghavendraが示唆していたのと同様に、PieCtrlの別のコントローラを宣言する必要があります。 $controller('Ctrl1', {$scope: $scope})は私のためには機能しませんでしたが、（私の場合は同じファイル内で）全く別のコントローラを作成することができました。

例：

datapoint.controller('datapointController', ['$scope', 'datapointFactory', '$cookies', '$route', '$routeParams', '$location', function ($scope, datapointFactory, $cookies, $route, $routeParams, $location) { 

    //this controller's code 

}]); 

    //in same file 

datapoint.controller("PieCtrl", ['$scope', '$rootScope', 'datapointFactory', function ($scope, $rootScope, datapointFactory) { 

    //code related to the angular chart 

}]); 

希望、これは他の誰がこの問題を持って役立ちます！

Answer 2

1. あなたの「PIECTRL」は別のコントローラである場合は、次のように別のコントローラを注入する$controller依存関係を使用する必要があります。
   app.controller('Ctrl2', ['$scope', '$controller', function($scope, $controller){ $controller('Ctrl1', {$scope: $scope}) //Ctrl1 scope will be available here }])
2. は、グラフのみを使用します。あなたの角モジュールの依存関係のjs