Angularjs - 錯誤：[$ injector：unpr]

Question

我正在嘗試在特定的Modal插件中使用Angular UI Bootstrap module。

• 應用
  • scheda
    • scheda.html
    • schedacontroller.js
  • app.js
： 我的應用程序文件夾是這樣構成
• css
• ...
• 的index.html

這app.js，主要的應用程序文件：

// created the module GasistaFelice 
// also included ngRoute for all our routing needs 

angular.module('ngGasistaFelice', []) 
.run(function($rootScope) { 
    $rootScope.gasID = "10"; //default value 
}); 

angular.module('ngGasistaFelice', ['ui.bootstrap']); 

var GasistaFelice = angular.module('ngGasistaFelice', ['ngRoute']); 

GasistaFelice.config(['$routeProvider',function($routeProvider) { 
      $routeProvider 
// route for the home page 
      .when('/', { 
       templateUrl : 'app/ordinare/ordinare.html', 
       controller : 'orderController' 
      }) 

      // route for the paniere page 
      .when('/:id/gasmember/:id/basket', { 
       templateUrl : 'app/paniere/paniere.html', 
       controller : 'paniereController' 
      }) 

      // route for the scheda page 
      .when('/:id/profile', { 
       templateUrl : 'app/scheda/scheda.html', 
       controller : 'schedaController' 
      }) 

      // route for the conto page 
      .when('/:id/gasmember/:id/cash', { 
       templateUrl : 'app/conto/conto.html', 
       controller : 'contoController' 
      }) 
      .otherwise({ 
        redirectTo: '/' 
       }); 
    }]); 

EXC ....

這是頁面的控制器，我想在其中插入Modal插件：

var app = angular.module('ngGasistaFelice', ['ui.bootstrap']); 
app.controller('schedaController', function ($scope, $routeParams, $modal, $log, $http) { 
     var id = $routeParams.id; 
     // --- URL finale --- 
     //var url = 'http://localhost:8000/gasistafelice/api/v1/person/id/?format=json'; 
     //URL di prova 

     $scope.items = ['item1', 'item2', 'item3']; 

      $scope.open = function (size) { 

      var modalInstance = $modal.open({ 
       templateUrl: 'myModalContent.html', 
       controller: ModalInstanceCtrl, 
       size: size, 
       resolve: { 
       items: function() { 
        return $scope.items; 
       } 
       } 
      }); 

      modalInstance.result.then(function (selectedItem) { 
       $scope.selected = selectedItem; 
      }, function() { 
       $log.info('Modal dismissed at: ' + new Date()); 
      }); 
      }; 

當我加載包含schedaController的頁面，我不斷收到此錯誤：

Error: [$injector:unpr] h ttp://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams 
    at Error (native) 
    at http://localhost/GasistaFelice2_angular/js/angular.min.js:6:450 
    at http://localhost/GasistaFelice2_angular/js/angular.min.js:35:431 
    at Object.c [as get] (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:13) 
    at http://localhost/GasistaFelice2_angular/js/angular.min.js:35:499 
    at c (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:13) 
    at d (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:230) 
    at Object.instantiate (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:394) 
    at http://localhost/GasistaFelice2_angular/js/angular.min.js:66:112 
    at http://localhost/GasistaFelice2_angular/js/angular.min.js:53:14 

謝謝

Answer 1

你定義angular.module('ngGasistaFelice', [])不同需要的模塊多次（第二個參數內的module功能）：

angular.module('ngGasistaFelice', []) 
angular.module('ngGasistaFelice', ['ui.bootstrap']); 
var GasistaFelice = angular.module('ngGasistaFelice', ['ngRoute']); 
var app = angular.module('ngGasistaFelice', ['ui.bootstrap']); 

...具體而言，最後一個是你想使用ngRoute同一個，而你甚至還沒有我拒絕它。

一個更好的解決方案是，一旦定義它，說：

var GasistaFelice = angular.module('ngGasistaFelice', [ 
    'ui.bootstrap', 
    'ngRoute' 
]); 

然後你可以做你想要做的事：

GasistaFelice.controller(...); 

或者，如果您需要這在另一個文件（或範圍）和GasistaFelice尚未定義，您可以通過調用angular.module而不是通過所需的依賴關係來獲取它，如：

var app = angular.module('ngGaistaFelice'); 
app.controller(...); 

Answer 2

從版本0.14.0開始，您需要使用角度組前綴所有組件，請參閱more。對於您的情況，您需要 更改：$ modal for $ uibModal。 更改：$ modalInstance爲$ uibModalInstance。 Change：modal-transclude for uib-modal-transclude