Question

我已经构建了简单的角度页面但是在向依赖项添加了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引用页面运行良好。

Answer 1

更新版本已将$modal更改为$uibModal。

在许多服务中添加了相同的ui前缀。请参阅文档示例

Answer 2

要充分利用UIB，请使用ng-animate脚本并将其注入模块。这将为你的模态添加动画。

Angular Error：[$ injector：unpr]，同时添加ui.bootstrap

2 个答案: