Uncaught Error: Unknown provider: $templateRequestProvider <- $templateRequest <- $modal

Question

你好 Whosebugers ;)

我在这个关于 bootstrap.ui 模态的特定问题上纠结了一段时间：

Uncaught Error: Unknown provider: $templateRequestProvider <- $templateRequest <- $modal

我已经尝试定义一个提供者，但我无法让它正常工作。

这是我的 app.js:

var app = angular.module('stelping', ['ui.bootstrap']).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'pages/home.html',
            controller: HomeCtrl,
            activetab: 'home'
        }).
        when('/notentool', {
            templateUrl: 'pages/notentool.html',
            controller: NotentoolCtrl,
            activetab: 'notentool'
        }).
        when('/lerngruppe', {
            templateUrl: 'pages/lerngruppe.html',
            controller: LerngruppenCtrl,
            activetab: 'lerngruppe'
        }).
        when('/raumreservierung', {
            templateUrl: 'pages/raumreservierung.html',
            controller: RaumreservierungCtrl,
            activetab: 'raumreservierung'
        }).
        when('a', function() {
            return {
                restrict: 'E',
                link: function(scope, elem, attrs) {
                    if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                        elem.on('click', function(e){
                            e.preventDefault();
                        });
                    }
            }
        }}).
        when('/registrieren', {
            templateUrl: 'pages/registrieren.html',
            controller: RegistrierungsCtrl,
            activetab: 'registrieren'
        }).
        otherwise({ redirectTo: '/' });
}]).run(['$rootScope', '$modal', '$log', '$http', '$browser', '$timeout', "$route", function ($scope, $modal, $log, $http, $browser, $timeout, $route) {

    $scope.$on("$routeChangeSuccess", function (scope, next, current) {
        $scope.part = $route.current.activetab;
    });


}]);

app.config(['$locationProvider', function($location) {
    $location.hashPrefix('!');
}]);

这是我的 controller.js（部分只有两个新的 Ctrl）：

function LerngruppenCtrl($scope, $modal, $log) {
$scope.buildings = [ 1, 5, 6 ];
$scope.rooms = [ 0, 1, 2, 3, 4 ];
$scope.currentBuilding = 1;
$scope.currentRoom = 0;
$scope.setRoom = function(room) {
    $scope.currentRoom = room;
}
$scope.setBuilding = function(building) {
    $scope.currentBuilding = building;
}
$scope.imgChanger = function() {
    return $scope.currentBuilding+"_"+$scope.currentRoom;
};
$scope.class = "hidden";

$scope.open = function (size) {

    var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        size: size
    });
    modalInstance.result.then(function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};
}

function ModalInstanceCtrl($scope, $modalInstance) {
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}

Answer 1

该错误是由于 ui.bootstrap 和 angular 的版本不匹配造成的。 ui.bootstrap .13 取决于 1.3x，.12 取决于 1.2x。

Answer 2

我也有这个问题，我使用angular 1.2.28和ui.bootstrap 0.12.1，如果我在Chrome上使用Jetty 运行我的应用程序，那么控制台将显示 'Unknown provider: $templateRequestProvider <- $templateRequest <- $modal'，但如果我运行我的应用程序在 Safari 上将不会显示错误。

Answer 3

我也有同样的问题。我使用最新版本的 angularjs、ui-bootstrap 解决了这个问题我用过这些版本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>

Uncaught Error: Unknown provider: $templateRequestProvider <- $templateRequest <- $modal

Uncaught Error: Unknown provider: $templateRequestProvider <- $templateRequest <- $modal

twitter-bootstrap

angularjs

bootstrap-modal