Angular UI Bootstrap $ uibModal没有被注入?

时间:2016-10-27 04:13:15

标签: angularjs angular-ui-bootstrap

我正在尝试使用angular-bootstrap,出于某种原因,我遇到了未知提供程序错误。

一切看起来都井然有序。我已经在bower安装了最新版本,您可以在下面的bower.json文件中看到。

这是我的bower.json文件:

 {
  "name": "client",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.5.8",
    "bootstrap-sass-official": "^3.2.0",
    "angular-animate": "^1.4.0",
    "angular-cookies": "^1.4.0",
    "angular-resource": "^1.4.0",
    "angular-route": "^1.4.0",
    "angular-sanitize": "^1.4.0",
    "angular-touch": "^1.4.0",
    "angular-ui-router": "^0.3.1",
    "jquery": "^2.2.0",
    "angular-xeditable": "^0.2.0",
    "oclazyload": "^1.0.9",
    "angular-motion": "^0.4.4",
    "angular-local-storage": "^0.5.0",
    "angular-sweetalert": "latest",
    "angular-password": "^1.0.3",
    "ng-file-upload-shim": "^12.2.12",
    "ng-file-upload": "^12.2.12",
    "ng-img-crop": "ngImgCrop#^0.3.2",
    "ngvideo": "^1.0.2",
    "angular-bootstrap": "^2.2.0"
  },
  "devDependencies": {
    "angular-mocks": "^1.4.0"
  },
  "appPath": "app",
  "moduleName": "clientApp",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    }
  },
  "resolutions": {
    "angular": "~1.x"
  }
}

我已添加对我的模型的引用:

angular
  .module('clientApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ui.router',
    'ngSanitize',
    'ngTouch',
    'ui.bootstrap',
    'oitozero.ngSweetAlert'
  ])

我正在把它注入我的控制器:

.controller('BalanceWheelController', function($scope, $uibModal, lessons, $state) {

我调用模态的函数是:

        var modalInstance = $uibModal.open({
            animation: true,
            backdrop: 'static',
            keyboard: false,
            templateUrl: 'questionsModal.html',
            controller: function($scope, $uibModalInstance, SweetAlert) {

                $scope.close = function() {
                    //self.showingExpenses = false;
                    $uibModalInstance.close();
                    videoId.play();
                };
            }
        });

所以我真的很困惑为什么我收到以下错误:

angular.js:10160 Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
http://errors.angularjs.org/1.2.32/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24uibModal
    at http://localhost:9000/bower_components/angular/angular.js:78:12
    at http://localhost:9000/bower_components/angular/angular.js:3803:19
    at Object.getService [as get] (http://localhost:9000/bower_components/angular/angular.js:3931:39)
    at http://localhost:9000/bower_components/angular/angular.js:3808:45
    at getService (http://localhost:9000/bower_components/angular/angular.js:3931:39)
    at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:3958:13)
    at http://localhost:9000/bower_components/angular/angular.js:3809:37
    at getService (http://localhost:9000/bower_components/angular/angular.js:3931:39)
    at invoke (http://localhost:9000/bower_components/angular/angular.js:3958:13)
    at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3978:23) <div ui-view="" class="ng-scope">

这是我在index.html中的js引用:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="bower_components/sweetalert/dist/sweetalert.min.js"></script>
<script src="bower_components/angular-sweetalert/SweetAlert.js"></script>
<script src="bower_components/angular-password/angular-password.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
<script src="bower_components/ng-file-upload-shim/ng-file-upload-shim.js"></script>
<script src="bower_components/ng-img-crop/compile/minified/ng-img-crop.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

1 个答案:

答案 0 :(得分:2)

您已成功安装了Angular 1.2.32(请注意错误网址中的版本),该版本没有$templateRequest提供程序。这是通过一个(或多个)依赖项发生的。

更改您的resolutions以匹配您的angular依赖关系版本。

"resolutions": {
    "angular": "^1.5.8"
}

当你在那里时,我建议你将所有Angular依赖项的版本匹配为完全相同,即angular-animateangular-mocks等。