angularjs - Angular 中的 ui.bootstrap uibModal 打破了我的页面

Question

我目前正在学习 Angular，我正在关注的教程之一是使用旧版本的 Angular，因此教我使用 ui.bootstrap 的部分现在已经过时了。

我正在使用 angular v 1.4.9 和 ui.bootstrap v 1.1.0。

我试图将模板推送到新模式的文件如下所示：

var angularFormsApp = angular.module('angularFormsApp', ['ngRoute', 'ui.boostrap']);

angularFormsApp.controller("HomeController",
function($scope, $location, $uibModal, DataService) {

    $scope.showCreateEmployeeForm = function() {
        //$location.path('/newEmployeeForm');
        $uibModal.open({
            templateUrl: 'app/EmployeeForm/efTemplate.html',
            controller: 'efController'
        });
    };

    $scope.showUpdateEmployeeForm = function(id) {
        $location.path('/updateEmployeeForm/' +id);
    }

});

我读过 ui.bootstrap 可以自己加载：

var angularFormsApp = angular.module('angularFormsApp', ['ngRoute'], ['ui.boostrap']);

但这也给了我同样的错误（见下文）。谁能看到我在这里做错了什么并帮助我？

Error: [ng:areq] Argument 'fn' is not a function, got string

Answer 1

有时你不得不轻笑……也许不是

问题在于我试图加载“ui.boostrap”，而不是“ui.bootstrap”

哦！

Answer 2

您应该向 $uibModal.open 提供控制器类，而不是控制器名称。像这样的东西：

$uibModal.open({
            templateUrl: 'app/EmployeeForm/efTemplate.html',
            controller: CfController
        });

function CfController() {
    //your controller code
}