向我的控制器中注入angular-ui的问题

Question

我的应用程序中有ui.bootstrap作为依赖项，但是在将$ modal服务注入控制器中时遇到了问题。 我收到以下错误：

   $modal is not defined

在我的控制器代码中，特别是在下面尝试打开模式的此函数中：

 function saveAndDisplayReport() {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: ModalInstanceCtrl,
            size: size,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });
        $location.url('index.html#/?reptname=' + vm.reptName);
    }

这是我的reportmaint.js控制器代码标头部分，但是我不清楚如何注入ui.bootstrap（请参阅$ modal参数）：

(function () {
'use strict';
var controllerId = 'reportmaint';
angular.module('app').controller(controllerId, ['$rootScope', '$scope', '$location', 'common',  'datacontext',
                                                'gridHierarchyService', 'reportsContext', '$modal', reportmaint]);

function reportmaint($rootScope, $scope, $location, common, datacontext, gridHierarchyService, reportsContext) {
    var getLogFn = common.logger.getLogFn;
    var log = getLogFn(controllerId);        
    var logErr = getLogFn("error");
  ...
 })();

这是我的app.js，其中定义了“ ui.bootstrap”：

(function () {
'use strict';

var app = angular.module('app', [
    // Angular modules 
    'ngAnimate',        // animations
    'ngRoute',          // routing
    'ngSanitize',       // sanitizes html bindings (ex: sidebar.js)

    // Custom modules 
    'common',           // common functions, logger, spinner
    'common.bootstrap', // bootstrap dialog wrapper functions

    // 3rd Party Modules
    'ui.bootstrap',          // ui-bootstrap (ex: carousel, pagination, dialog)
    'kendo.directives',      // Kendo UI
    'app.customcontrollers' // Language/Currency settings        
    //'ngjqxsettings'      // jQWidgets init and directives (loaded in index.html)
]);
app.run(['$route', '$rootScope', 'common', 'userService', function ($route, $rootScope, common, userService) {
  console.log("In app.run");
    var getLogFn = common.logger.getLogFn;
    var log = getLogFn('app');

 }]);

}）（）;

在index.html文件中，我有脚本参考：

  <script src="scripts/ui-bootstrap-tpls-0.10.0.js"></script>

我用这plunker作为一个活生生的例子，但我仍然会错误的地方- http://plnkr.co/edit/KsADLPaOfY7rtPTdWyYn?p=preview

在此先感谢您的帮助...

鲍勃

Answer 1

似乎您根本没有在控制器的函数中注入模态（缺少$ modal）； 尝试类似的东西：

我不确定reportmaint是否是一项服务，如果不是，请将其删除

angular.module('app').controller('reportmaint', ['$rootScope', '$scope', '$location', 'common',  'datacontext','gridHierarchyService', 'reportsContext', '$modal', 'reportmaint',
    function($rootScope, $scope, $location, common, datacontext, gridHierarchyService, reportsContext, $modal, reportmaint) {
        //Client code

    }
]);