2

我正在尝试使用Angular UI Bootstrap 模块，特别是 Modal 插件。我的应用程序文件夹的结构是这样的：

  • 应用程序
    • 舍达
      • scheda.html
      • 调度控制器.js
    • 应用程序.js
  • css
  • ...
  • 索引.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: '/'
                });
    }]);

除了……

这是我要放置 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

谢谢

4

2 回答 2

4

您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(...);
于 2014-06-11T17:11:56.333 回答
1

由于 0.14.0 版 Angular 团队为您必须使用的所有组件添加了前缀，因此请查看更多. 对于您的情况，您需要更改：$uibModal 的 $modal。更改：$uibModalInstance 的 $modalInstance。更改：uib-modal-transclude 的modal-transclude

于 2016-02-19T13:41:02.760 回答