99

当我尝试实现引导模式窗口时，我不断收到此错误。可能是什么原因造成的？我已经从http://angular-ui.github.io/bootstrap/#/modal复制/粘贴了所有内容。

4

6 回答 6

201

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

在这种情况下，$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
});
于 2013-09-11T06:11:19.600 回答
55

5年后 （当时这不是问题）：

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

于 2016-01-21T09:48:33.010 回答
22

我今天也遇到的一个问题只是一个额外的附注：当我打开源代码的缩小/丑化时，我遇到了类似的错误“Unknown provider: $aProvider” 。

正如Angular 文档教程（段落：“关于缩小的说明”）中所述，您必须使用数组语法来确保正确保存引用以进行依赖注入：

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-09-18T11:19:20.537 回答
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

希望能帮助到你。

于 2016-01-22T16:17:01.233 回答
8

在检查了我包含所有依赖项后，我通过重命名和$modal来解决了这个问题$uibmodal$modalInstance$uibModalInstance

于 2016-09-04T14:38:25.820 回答
0 
var ModalInstanceCtrl = ['$scope', '$modalInstance',  function ($scope, $modalInstance, items) { 
   /* copy rest of example code here */ 
}];
于 2015-07-30T16:06:02.177 回答