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>

尽管按照 angular-chart.js 站点上的说明进行操作，我仍然收到此错误：

错误：ng:areq 参数错误

Argument 'datapointController' is not a function, got string

运行之前，我认为这是 PieCtrl 的位置，但在不同的位置移动它只会产生不同的错误。

将 'angular-chart.js' 添加到 datapointController.js 中的模块只会使整个页面变为空白并产生错误：

错误：$injector:modulerr 模块错误

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

我在摆弄过程中运行遇到的另一个错误是：

错误：$injector:unpr 未知提供者

Unknown provider: PieCtrlProvider <- PieCtrl <- datapointController

我不确定 PieCtrlProvider 是否是我必须提供的另一个论点。无论如何，我似乎是在遵循 angular-chart.js 上的示例，只是对我网站上的其他内容添加了额外的依赖项。

感谢您对此的任何帮助。

Answer 1

如果您的 'PieCtrl' 是另一个控制器，那么您需要使用 $controller 依赖项将一个控制器注入另一个控制器，如下所示：
app.controller('Ctrl2', ['$scope', '$controller', function($scope, $controller){ $controller('Ctrl1', {$scope: $scope}) //Ctrl1 scope will be available here }])
在您的 angular 模块依赖项中仅使用 chart.js

Answer 2

事实证明，与 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

}]);

希望这对遇到此问题的其他人有所帮助！

angular-chart.js 供应商和注入器不工作

angular-chart.js provider and injectors not working

javascript

charts

angularjs

angular-chart