【问题标题】：Angularjs - $uibModal provider errorAngularjs - $uibModal 提供程序错误
【发布时间】：2016-03-30 15:16:53
【问题描述】：

我正在尝试将 $uibModal 注入我的项目，但是当控制器加载时，我收到以下错误：

Error: [$injector:unpr] Unknown provider: $uibModalProvider <- $uibModal <- abilityListController

我正在使用 NuGet 进行包管理。

Angularjs：1.4.8

引导程序：3.3.6

Angular-Ui-Bootstrap：0.14.3

下面是相关代码：

索引.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-ui/ui-bootstrap.js"></script>
    <script src="app/app.js"></script>
    <script src="app/homeController.js"></script>
    <script src="app/abilityList/abilityListController.js"></script>
</head>
<body>
    <div ng-app="tecApp">
        <div ng-controller="homeController as vm">
            </div>
            <div ng-controller="abilityListController as vm" ng-if="true">
                <div ng-include="'app/abilityList/abilityList.html'"></div>
            </div>
        </div>
    </div>
</body>
</html>

app.js：

angular.module("tecApp", []);

AbilityListController.js：

angular
    .module('tecApp')
    .controller('abilityListController', AbilityListController);

AbilityListController.$inject = ['$uibModal'];

function AbilityListController($uibModal) {
    var vm = {};
    return vm;
}

我认为我的注入不正确，但这可能与我包含源文件的方式有关。

除了上述错误之外，我没有收到任何控制台错误。

对于我的 Angular 代码，我更喜欢这种语法，所以我希望修复我的代码，而不是使用 ('controllername', ['$stuff', 'moreStuff'])。

提前感谢您的帮助。

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

您应该在使用之前注入依赖模块。你的代码应该是这样的：

angular
    .module('tecApp',['ui.bootstrap'])

【讨论】：

【解决方案2】：

我今天浪费了 3 个小时来弄清楚 "angular-bootstrap": "0.12.2" 现在应该是 "angular-ui-bootstrap": "1.1.2" 在你的包 json 中。

我不明白为什么在 angular-bootstrap 中找不到版本 1.1.2 ...

它现在就像一个魅力！

希望对您有所帮助... :)

【讨论】：

github.com/angular-ui/bootstrap 说：“不要安装 angular-ui-bootstrap'。一个单独的存储库 - bootstrap-bower - 托管已编译的 javascript 文件和 bower.json。”
angular-ui-bootstrap 从 0.14.0 版本将其服务名称从 $modal 更改为 $uibModal --> 注入正确的服务取决于您使用的 ui-bootstrap 版本

【解决方案3】：

将ui.bootstrap 模块注入您的应用程序模块：

angular.module("tecApp", ["ui.bootstrap"])

您还可以使用ui.bootstrap 模块中的$modal（甚至可能更好）服务，而不是$uibModal

【讨论】：

谢谢！最后我听说，ui-bootstrap 不推荐使用 $modal，他们更喜欢使用 $uibModal。我确信存在一些差异，但它们的功能似乎相同。
这解决了我的问题。我正在使用 angular 1.4.9 和 angular-ui-bootstrap 1.3.2，在官方页面 (angular-ui.github.io/bootstrap) 上他们写道你必须使用 $uibModal 但这对我不起作用。

【解决方案4】：

它对我有用。我有 angularJS 版本 1.2.16。 ui-bootstrap 的兼容版本是 0.12.0。使用前需要搜索兼容版本。

【讨论】：

【解决方案5】：

我尝试解决我的问题。

安装最新版本的 angular-bootstrap

npm install angular-bootstrap or bower install angular-bootstrap

【讨论】：