I created this controller
app.controller('headerCtrl', [
'$scope', '$log', '$uibModal', function($scope, $log, $uibModal){...}])
which gives the following error anytime i run it
Unknown provider: $uibModalProvider <- $uibModal <- headerCtrl
According to angular, this may be due to a typo with the dependency name or an undefined dependency which is not the case here since ui.bootstrap is defined and spelled correctly
Here is my module
var app = angular.module('app', [
'ngMap',
'ui.router',
'ui.bootstrap',
'ngSanitize',
'ngAnimate'
]);
However, when i remove '$uibModal' before the function like this
app.controller('headerCtrl', [
'$scope', '$log', function($scope, $log, $uibModal){...}])
and run
console.log($uibModal)
console returns undefined. I updated ui-bootstrap with bower but that didn't work. I haven't been able to create a modal because of this. How do I get $uibModal to be injected successfully by angular
Related
I want to inject a config into my angular app. The app contains also an run object.
But when I add the config option I get an $injector:modulerr error. And I can't find the error.
var myApp = angular.module('myApp',[
'ngAnimate',
'ui.bootstrap',
'ui.router',
'angular.filter',
'angularUtils.directives.dirPagination',
'validation.match',
'ngSanitize',
'ngCookies',
'pascalprecht.translate',
'toggle-switch',
'angucomplete-alt',
'cgPrompt',
'dndLists',
'ngFileUpload',
'ui.router.breadcrumbs',
'angular-bind-html-compile',
'rzModule', // range slider (i.e. for price filter)
'ngFileSaver',
'angular-input-stars',
'textAngular',
'textAngular-uploadImage'
]);
myApp.config(function($provide) {
$provide.decorator('taOptions', function($delegate) {
$delegate.toolbar[1].push('uploadImage');
return $delegate;
});
});
myApp.run(['$rootScope', '$window', '$location', '$stateParams', '$api', '$translate', '$transitions', '$state',
function($rootScope, $window, $location, $stateParams, $api, $translate, $transitions, $state) {
//rootscope
}]);
It's going about the textAngular-uploadImage module (https://github.com/mrded/textAngular-uploadImage). When I remove the config option my app runs fine, but of course, I can't use the module.
What is the reason for this? I included al the required files in the html, and textAngular (https://github.com/textAngular/textAngular) is working fine.
How can I solve this? Or are there any other options for a normal upload function in textAngular? I also tried this solution (https://github.com/textAngular/textAngular/issues/139#issuecomment-111205679) but I get the same error.
Try something below code..
myapp.config(['$provide', function($provide){
$provide.decorator('taOptions', ['$delegate', function(taOptions){
taOptions.toolbar[1].push('uploadImage');
}
return taOptions;
}];
});
And you would need to register upload image with editor like below
taRegisterTool('uploadImage', {
iconclass: "fa fa-user",
action: function(){
//code
}
});
I am a beginner trying to implement $uibmodal but not only am I not able to get the modal to work, adding ui-bootstrap and $uibmodal stops the rest of the code from working.
When I added a dependency 'ui.bootstrap' below, the page doesn't load (when I remove it, the page loads as normal)
`angular
.module('navApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap'
])
Then in my controller, when I included $uibmodal, scope.title doesn't show up in my view etc
angular.module('navApp')
// Passing the $modal to controller as dependency
.controller('HomeCtrl', ['$scope', '$uibmodal', function
($scope, $uibmodal) {
$scope.title = "Hello, Angm-Generator!";
$scope.open = function () {
var modalInstance = $uibmodal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl'
});
};
}])
The error msg I got is angular.js:13550 Error: [$injector:unpr] Unknown provider: $uibmodalProvider <- $uibmodal <- HomeCtrl
Any idea what could be wrong?
Have you tried $uibModal with the capital M?
angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
.factory('modalFactory', function($uibModal) {
//Stuff
}
I am getting the error "Unknown Provider".
I have searched throught the forums and implemented all suggestions(marked as answer, as well).
But error isnt resolved. Please guide. Below is the code:
In html, am referring 1. angular.min.js 2.angular-resource.js 3.App.js 4.MyJS in the same order.
In my app.js:
angular.module('myApp', [ 'ngSanitize', 'ngCookies','ngResource' ]);
angular.module('myApp')
.controller('MainCtrl', ['$rootScope','$resource', function($rootScope) {
//my code goes here//
}]);
In another JS file:
angular.module('myApp')
.controller('myController',
['$scope', '$rootScope', '$http', '$window', '$cookies', '$resource', function ($scope, $rootScope, $http, $window, $cookies, $resource)
{ ---- My Code ----- }
I have seen the forums and suggestions and ensured app.js is called first. angular-resource.js is referred after referring angular.min.js.
Please suggest where am going wrong.
Thank You
Should be
['$rootScope','$resource', function($rootScope, $resource) {
instead of
['$rootScope','$resource', function($rootScope) {
Number of controllers function parameters should be same as number of string literals.
I'm trying to initialize ngBootbox and toaster.
var app, deps;
deps = ['treeGrid'];
app = angular.module('MyApp', deps);
app.controller('treeGridController', [
'$scope', '$http', '$ngBootbox', 'toaster',
function($scope, $http, $ngBootbox, toaster, $timeout) {
..some code
}]);
And I get this error in the console :
[$injector:unpr] Unknown provider: $ngBootboxProvider <- $ngBootbox
What did I forget to install? I have a similar page and it works fine.
You need to add ngBootbox and toaster into your module dependencies, like this:
deps = ['ngBootbox', 'toaster', 'treeGrid']
This is not a duplicate of This Question
I have included all the required files in view:
<script src="~/Scripts/angular-file-upload-master/examples/console-sham.min.js"></script>
<script src="~/Content/js/angular.js"></script>
<script src="~/Scripts/angular-file-upload-master/angular-file-upload.js"></script>
My module and controller:
var controllers = angular.module('controllers', ['ngGrid', 'ngDialog', 'angularFileUpload']);
controllers.controller('CustomProductsCtrl',
['$scope', '$window', 'ngDialog', 'CommonService',
'CustomProductsServices', '$upload',
function ($scope, $window, ngDialog, CommonService,
CustomProductsServices, $upload){
});
But still I get this error.
Error: [$injector:unpr] Unknown provider: $uploadProvider
Please help me out.
Hit the same issue, turned out that the documentation to inject $upload is out of date, it should be FileUploader:
controllers.controller('CustomProductsCtrl',
[..., '$upload', function (..., 'FileUploader') {
Spent more time than I'd like to admit figuring that out. FYI, I determined that by looking at angular-file-upload.js:
.factory('FileUploader', ['fileUploaderOptions', '$rootScope', '$http', '$window', '$compile',
It appears that you didn't close the controller declaration correctly.
Specifically, you have: }); when you should have }]); instead. Note the missing ].
In context, you should have:
var controllers = angular.module('controllers', ['ngGrid', 'ngDialog', 'angularFileUpload']);
controllers.controller('CustomProductsCtrl',
['$scope', '$window', 'ngDialog', 'CommonService',
'CustomProductsServices', '$upload',
function ($scope, $window, ngDialog, CommonService,
CustomProductsServices, $upload){
}]); // Note: missing ']' added in here
because we need to follow the form of declaring a controller. The controller API is terse, but pretty succint:
$controller(constructor, locals);
Which expanded to your case:
module_name.controller( 'your_Ctrl',
[locals, function(){
}
]
);
I added in extra spacing to call out the missing ] and to show how we're closing off elements within the declaration.
It seems this error can be ng-file-upload version dependent:
https://github.com/danialfarid/ng-file-upload/issues/45
If you try the suggestions on that page and this page and still get the error, the following worked for me:
angular.module('starter.controllers', ['ngFileUpload'])
.controller('HomeCtrl', function($scope, ... Upload) {
...
file.upload = Upload.upload({...}); //Upload instead of $upload
...
})