javascript - Angular 错误 : [$injector:unpr] while adding ui. Bootstrap

Question

我已经构建了简单的 Angular 页面，但是在将 ui.bootstrap 添加到依赖项之后我得到了一个错误:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20HomeController

这是 index.html 文件的引用部分:

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EmployeeForm/efController.js"></script>
<script src="app/EmployeeForm/efDirective.js"></script>
<script src="app/DataService.js"></script>

这是我的应用程序 js:

var angularFormsApp = angular.module('angularFormsApp',['ngRoute','ui.bootstrap']);
angularFormsApp.config(function($routeProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "app/Home.html",
            controller: "HomeController"
        }).when("/newEmployeeForm", {
            templateUrl: "app/EmployeeForm/efTemplate.html",
            controller: "efController"
        }).when("/updateEmployeeForm/:id", {
            templateUrl: "app/EmployeeForm/efTemplate.html",
            controller: "efController"
        }).otherwise({
                redirectTo:"/home"
        });
});

angularFormsApp.controller("HomeController",
function ($scope, $location, $modal,DataService) {
    $scope.showCreateEmployeeForm = function () {
          $location.path('/newEmployeeForm');
        $modal.open(
        {
            templateUrl: 'app/EmployeeForm/efTemplate.html',
            controller: 'efController'
        });
    };
    $scope.showUpdateEmployeeForm = function (id) {
        $location.path('/updateEmployeeForm/'+id);
    };
});

知道我做错了什么吗？ Whitout ui.bootstrap reference 页面运行良好。

Answer 1

最近的版本将 $modal 更改为 $uibModal。

相同的 ui 前缀被添加到许多服务中。查看文档示例