Unknown provider: $modalProvider <- $modal erro

2楼-- · 2019-02-01 03:32

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.

0人赞添加讨论(0) 举报

放我归山

3楼-- · 2019-02-01 03:35

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.

0人赞添加讨论(0) 举报

混吃等死

4楼-- · 2019-02-01 03:43

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

0人赞添加讨论(0) 举报

家丑人穷心不美

5楼-- · 2019-02-01 03:45

The obvious answer for the provider error is the missing dependency when declaring a module as in the case of adding ui-bootstrap. The one thing many of us do not account for is the breaking changes when upgrading to a new release. Yes, the following should work and not raise the provider error:

var app = angular.module('app', ['ui.router', 'ngRoute', 'ui.bootstrap']);
app.factory("$svcMessage", ['$modal', svcMessage]);

Except when we are using a new version of ui-boostrap. The modal provider now is defined as:

.provider('$uibModal', function() {
    var $modalProvider = {
      options: {
        animation: true,
        backdrop: true, //can also be false or 'static'
        keyboard: true
      },

The advise here is once we have make sure that the dependencies are included and we still get this error, we should check what version of the JS library we are using. We could also do a quick search and see if that provider exists in the file.

In this case, the modal provider should now be as follows:

app.factory("$svcMessage", ['$uibModal', svcMessage]);

One more note. Make sure that your ui-bootstrap version supports your current angularjs version. If not, you may get other errors like templateProvider.

For information check this link:

http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html

hope it helps.

0人赞添加讨论(0) 举报

可以哭但决不认输i

6楼-- · 2019-02-01 03:47

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
});

0人赞添加讨论(0) 举报

孤傲高冷的网名

7楼-- · 2019-02-01 03:52

after checking that I had all dependancies included, I fixed the issue by renaming $modal to $uibmodal and $modalInstance to $uibModalInstance

0人赞添加讨论(0) 举报

Unknown provider: $modalProvider <- $modal erro

Update:

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间