Question

我一直在接收此错误，因为我正在尝试实现bootstrap Modal窗口。可能是什么原因造成的？我在http://angular-ui.github.io/bootstrap/#/modal这里复制/粘贴了所有内容。

Answer 1

当您为控制器，服务等编写依赖项时，会发生此类错误，并且您尚未创建或包含该依赖项。

在这种情况下，$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
});

Answer 2

5年后 （这在当时不会出现问题）：

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

Answer 3

对于今天我也遇到过的问题，这是一个额外的旁注：当我打开源代码的缩小/ uglify 时，我有类似的错误“未知提供商：$ aProvider”。

如Angular docs tutorial (paragraph: "A Note on Minification")中所述，您必须使用数组语法来确保正确保留引用以进行依赖注入：

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

对于你提到的Angular UI Bootstrap example，你应该替换它：

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模式窗口代码再次起作用。

Answer 4

提供程序错误的明显答案是在添加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

希望它有所帮助。

Answer 5

在检查我是否包含所有依赖项后，我通过将$modal重命名为$uibmodal并将$modalInstance重命名为$uibModalInstance来修复此问题

Answer 6

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

未知提供者：$ modalProvider＆lt; - $ AngularJS的模态错误

6 个答案:

更新