錯誤的注入$ modalProvider依賴關係angujarjs

Question

我想在使用bootstrap的angularjs中打開一個對話框，但每當我嘗試在注入正確的依賴關係時出現此錯誤。

.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文件都在我的文檔

<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

在角度js手動引導應該是你的js文件的最後一行。將此行添加到您的js文件的末尾

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

希望這能奏效。

Answer 2

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 
      } 
     } 
    }); 
}]); 

Answer 3

你需要通過你的控制器的名稱作爲模塊依賴。
angular.module('controller', ['login_ctrl','ui.bootstrap']);