javascript - 错误注入(inject) $modal Provider 依赖 angularjs

Question

我正在尝试使用 bootstrap 在 angularjs 中打开一个对话框，但每当我尝试时，我都会在注入(inject)正确的依赖项时遇到此错误。

.controller('login_ctrl', ['$scope','$http','$window','$modal','$log', function($scope,$http,$window,$modal,$log) {

    var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',

            //size: size,
            resolve: {
                user: function() {
                    return userData;
                },
                selectedProducts: function() {
                    return userData.selectedProducts;
                },
                products: function () {
                    //console.log($scope.selectedProducts);
                    return $scope.products; // get all available products
                }
            }
        });

}])

所有文件js和css文件都在我文档的head部分

<link href="/spree/web/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/spree.css">
<script src="/spree/web/lib//angularjs/angular.min.js"></script>
<script src="/spree/web/lib/angularjs/angular-route.min.js"></script>
<script src="/spree/web/js/app.js"></script>
<script src="/spree/web/js/controller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>

这就是 js 开始的样子

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

当我预览时，我在控制台中收到此错误

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

Answer 1

In new version of ui-bootstrap all params and injections changes to $uib* for example for your question you have to use $uibModal instead $modal in your controller.

.controller('login_ctrl', ['$scope','$http','$window','$uibModal','$log', function($scope,$http,$window,$uibModal,$log) {

var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',

        //size: size,
        resolve: {
            user: function() {
                return userData;
            },
            selectedProducts: function() {
                return userData.selectedProducts;
            },
            products: function () {
                //console.log($scope.selectedProducts);
                return $scope.products; // get all available products
            }
        }
    });
}]);