我一直在尝试为我当前的项目测试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 Bad Argument
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上的示例,只是为我网站上的其他内容添加了额外的依赖项。
感谢您提供任何帮助。
答案 0 :(得分:0)
$controller
依赖关系将一个控制器注入另一个控制器,如下所示:app.controller('Ctrl2', ['$scope', '$controller', function($scope, $controller){
$controller('Ctrl1', {$scope: $scope})
//Ctrl1 scope will be available here
}])
答案 1 :(得分:0)
事实证明,与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
}]);
希望这可以帮助其他人解决这个问题!