I am trying to use this plugin https://github.com/jtblin/angular-chart.js. And I am getting this error (I don't think the problem is with the plugin instead it's in the way I'm doing the injection!!):
Error: [$injector:unpr] Unknown provider: chart.jsProvider <- chart.js <- WhateverCtrl
http://errors.angularjs.org/1.3.20/$injector/unpr?p0=chart.jsProvider%20%3C-hart.js%20%3C-%20WhateverCtrl
at http://mega.app/scripts/vendor.js:9895:12
at http://mega.app/scripts/vendor.js:13863:19
at Object.getService [as get] (http://mega.app/scripts/vendor.js:14010:39)
at http://mega.app/scripts/vendor.js:13868:45
at getService (http://mega.app/scripts/vendor.js:14010:39)
at invoke (http://mega.app/scripts/vendor.js:14042:13)
at Object.instantiate (http://mega.app/scripts/vendor.js:14059:27)
at http://mega.app/scripts/vendor.js:18356:28
at http://mega.app/scripts/vendor.js:44696:28
at invokeLinkFn (http://mega.app/scripts/vendor.js:18113:9)
when I inject chart.js globally like below, I don't get any error. (keep reading)
angular.module('my-app', [
'chart.js' // <<<<<
'ui.router',
'ngStorage',
// ...
]);
})();
But from my understanding, it's recommended to inject this module only in the controllers that uses it, thus when I try to inject it in a controller like below, I get the error above.
angular
.module('my-app')
.controller('WhateverCtrl', ctrl);
ctrl.$inject = ['chart.js']; // <<<<<
function ctrl() {
var vm = this;
// ...
However if I remove the $ from the injection line to ctrl.inject = ['chart.js']; I do get rid of the error, but chart.js wont work, because I guess I must pass it to the function function ctrl() { like this function ctrl(chart.js) { which of course causes an error due to the ..
Since angular-chart.js is itself a module, it must be injected into the module and cannot be injected into the controller.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With