I've been trying to test out angular-chart.js for my current project, but I haven't even been able to get past the installation phase. Following the directions outlined on the angular-chart.js site (specifically the pie chart example), I added the proper dependencies for all of the components, but I'm still getting errors. Best I can figure is that there's a conflict with another dependency or that I called the injections in the wrong order.
Here's my app.js
:
angular.module("datapoint", ['ngSanitize', 'ngCsv', 'chart.js', 'angular-chart.js']);
Here's my canvas tag in the HTML
:
<canvas id="pie" width="300" height="300" class="chart-canvas chart chart-pie" chart-data="getPieChartData" chart-labels="getPieChartLabels" chart-options="options"></canvas>
Here's the beginning of my controller, datapointController.js
:
var datapoint = angular.module('datapoint', ['ngCookies', 'ngCsv', 'chart.js']);
datapoint.controller('datapointController', 'PieCtrl', ['$scope', 'datapointFactory', '$cookies', function ($scope, datapointFactory, $cookies) {
And for good measure, here's how I call all the scripts in my 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>
Despite following the directions on the angular-chart.js site, I still get this error:
Error: ng:areq Bad Argument
Argument 'datapointController' is not a function, got string
Running into this before, I figured it was the placement of PieCtrl
, but moving that around in different spots just creates different errors.
Adding 'angular-chart.js'
to the module in datapointController.js
just makes the entire page go blank and creates the error:
Error: $injector:modulerr Module Error
Failed to instantiate module datapoint due to: Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=a...)
And another error I've run into in my fiddling is:
Error: $injector:unpr Unknown Provider
Unknown provider: PieCtrlProvider <- PieCtrl <- datapointController
And I wasn't sure if PieCtrlProvider
was another argument that I had to provide. In any event, I seem to be following the examples on angular-chart.js, only with extra added dependencies for other things on my site.
Thanks for any help with this.
$controller
dependency to inject one controller to another as follows: app.controller('Ctrl2', ['$scope', '$controller', function($scope, $controller){ $controller('Ctrl1', {$scope: $scope}) //Ctrl1 scope will be available here }])
Turns out, similar to what Raghavendra was suggesting, you need to declare a separate controller for PieCtrl
. While $controller('Ctrl1', {$scope: $scope})
didn't work for me, creating a completely separate controller (in my case, within the same file) worked.
Example:
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
}]);
Hope this helps out anyone else having this issue!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.