未知提供者:$ modalProvider <-AngularJS中的$ modal错误


Answers:


197

当您为控制器,服务等编写依赖项时,没有创建或包含该依赖项,就会发生这种错误。

在这种情况下,$modal不是已知的服务。听起来您在引导角度时没有将ui-bootstrap作为依赖项传递。angular.module('myModule', ['ui.bootstrap']);另外,为安全起见,请确保您使用的是最新版本的ui-bootstrap(0.6.0)。

该错误在版本0.5.0中引发,但更新到0.6.0确实使$ modal服务可用。因此,更新至版本0.6.0,并确保在注册模块时需要ui.boostrap。

回复您的评论:这就是注入模块依赖项的方式。

<!-- 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) {

});

更新:

$modal服务已重命名为$uibModal

使用$ 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
});

1
我添加了ui.bootstrap并仍然收到相同的错误?我们需要添加皮带指令吗?这里说 stackoverflow.com/questions/18783974/...
Ranadheer雷迪

1
@Ranadheer您的链接与角带有关(这是一个不同的库)。就像我说的那样,您正在使用旧版的ui-bootstrap或未添加依赖项。另一个答案也很重要,那就是在缩小时需要传递名称,但这听起来似乎不适合您。
2013年

2
嗨,@ m59。你是礼。我包括旧版本的ui-bootstrap。现在,我包括了新版本,并且运行良好。非常感谢您:-)
Ranadheer Reddy 2013年

59
$ modal现在应该读为$ uibModal。不知道它在哪个版本中更改过,但是我花了很长时间尝试使$ modal开始工作,然后才发现它不再起作用...与$ modalInstance相同,将其设为$ uibModalInstance
delp

7
可惜他们一遍又一遍地更改它。首先是$ dialog,然后是$ modal,现在是$ uibModal。病了 感谢您更新答案。帮助过我。
史蒂文

54

5年后 (当时这不是问题)

名称空间已更改-升级到较新版本的bootstrap-ui后,您可能会偶然发现此消息;您需要参考$uibModal$uibModalInstance


谢谢。我对2个应用程序使用了相同的代码,但不适用于最后一个应用程序。此命名更改可能会破坏正在运行的应用程序!
2016年

2
谢谢!,自版本1.0.0起,$ Modal和$ ModalInstance已被弃用,请在此处
HaRoLD '16

$ modalInstance完全不适合我。$ uibModalInstance做到了
CommandZ

22

只是我今天也遇到的一个问题的补充说明:打开源代码的缩小/丑化处理时,我遇到了类似的错误“未知提供程序:$ aProvider”

Angular docs教程中所述(段落:“关于缩小的说明”),您必须使用数组语法来确保正确保存引用以进行依赖项注入:

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

对于Angular UI Bootstrap示例,您提到您应该将其替换为:

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

使用此数组符号:

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

有了这一更改,我缩小的Angular UI模态窗口代码又恢复了功能。


我不认为他现在正在处理缩小问题,但这值得注意,因为它也可能引起相同的问题。
2013年

看看github.com/btford/ngmin您可以在缩小之前运行它。然后,您可以继续编写简短格式,并通过参数名称依赖DI,而缩小仍然可以工作,因为ngmin确实扩展到了数组版本。
Pascal

11

提供程序错误的明显答案是在声明模块时缺少依赖项,就像添加ui-bootstrap一样。我们许多人不解释的一件事是升级到新版本时的重大更改。是的,以下应该可以工作,并且不会引发提供程序错误:

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

除非我们使用的是ui-boostrap的新版本。现在将模式提供程序定义为:

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

我们的建议是,一旦确保包括依赖项,并且仍然出现此错误,我们应该检查我们使用的JS库的版本。我们还可以进行快速搜索,以查看文件中是否存在该提供程序。

在这种情况下,模态提供者现在应如下所示:

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

还有一张便条。确保您的ui-bootstrap版本支持当前的angularjs版本。如果没有,您可能会收到其他错误,例如templateProvider。

有关信息,请检查此链接:

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

希望能帮助到你。


UI引导维基包含所有前缀列表改变。
bjauy

7

在检查了我是否包括所有依赖性之后,我通过重命名$modal$uibmodal$modalInstance来解决此问题。$uibModalInstance


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.