未知提供程序:$modalProvider < - AngularJS$modal错误

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

本文关键字：AngularJS 错误 modal modalProvider 程序 未知      更新时间：2023-09-26

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

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

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

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

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

只是我今天也遇到的一个问题的额外旁注：当我打开源代码的缩小/丑化时，我遇到了类似的错误"未知提供商：$aProvider"。

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

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

对于您提到的 Angular UI 引导程序示例，您应该替换它：

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

提供程序错误的明显答案是声明模块时缺少依赖项，就像添加 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 版本。如果没有，您可能会收到其他错误，例如模板提供程序。

有关信息，请查看此链接：

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

希望对您有所帮助。

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

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