Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unknown provider: $modalProvider <- $modal error with AngularJS

I keep receiving this error as I'm trying to implement bootstrap Modal window. What could be the cause of it? I've copy/pasted everything from http://angular-ui.github.io/bootstrap/#/modal here.

like image 511
Xeen Avatar asked Sep 11 '13 05:09

Xeen


3 Answers

This kind of error occurs when you write in a dependency for a controller, service, etc, and you haven't created or included that dependency.

In this case, $modal isn't a known service. It sounds like you didn't pass in ui-bootstrap as a dependency when bootstrapping angular. angular.module('myModule', ['ui.bootstrap']); Also, be sure you are using the latest version of ui-bootstrap (0.6.0), just to be safe.

The error is thrown in version 0.5.0, but updating to 0.6.0 does make the $modal service available. So, update to version 0.6.0 and be sure to require ui.boostrap when registering your module.

Replying to your comment: This is how you inject a module dependency.

<!-- tell Angular what module we are bootstrapping -->
<html ng-app="myApp" ng-controller="myCtrl">

js:

// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);

// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {

});

Update:

The $modal service has been renamed to $uibModal.

Example using $uibModal

// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);

// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
    //code here
});
like image 182
m59 Avatar answered Nov 02 '22 01:11

m59


5 years later (this would not have been the problem at the time):

The namespacing has changed - you may stumble across this message after upgrading to a newer version of bootstrap-ui; you need to refer to $uibModal & $uibModalInstance.

like image 55
Brent Avatar answered Nov 02 '22 01:11

Brent


Just an extra side note for an issue I also experienced today: I had a similar error "Unknown provider: $aProvider" when I turned on minification/uglify of my source code.

As mentioned in the Angular docs tutorial (paragraph: "A Note on Minification") you have to use the array syntax to make sure references are kept correctly for dependency injection:

var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

For the Angular UI Bootstrap example you mention you should this replace this:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
   /* ...example code.. */
}

with this array notation:

var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) { 
   /* copy rest of example code here */ 
}];

With that change my minified Angular UI modal window code was functional again.

like image 22
CREOFF Avatar answered Nov 02 '22 00:11

CREOFF