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標籤：

<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：AREQ糟糕論點

Argument 'datapointController' is not a function, got string

在此之前，我認爲這是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...)

而另一個錯誤我在我的擺弄中碰到的是：

錯誤：$ injector：unpr Unkn自己提供

Unknown provider: PieCtrlProvider <- PieCtrl <- datapointController

而且我不知道，如果是PieCtrlProvider另一種說法，我不得不提供。無論如何，我似乎都在關注angular-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 in your angular module dependencies