如何在主应用控制器中加载/注入服务？

Question

我正在尝试从this answer 实现一个模式，但我无法在应用程序控制器中使用该服务。问题很简单：如何在emaApp主控制器中通过注入使用modalService？

modal.js

angular.module('emaApp', []).service('modalService', [ '$modal',
// NB: For Angular-bootstrap 0.14.0 or later, use $uibModal above instead of $modal
function($modal) {

    var modalDefaults = {
        backdrop : true,
        keyboard : true,
        modalFade : true,
        templateUrl : '/app/partials/modal.html'
    };

    var modalOptions = {
        closeButtonText : 'Close',
        actionButtonText : 'OK',
        headerText : 'Proceed?',
        bodyText : 'Perform this action?'
    };

    this.showModal = function(customModalDefaults, customModalOptions) {
        if (!customModalDefaults)
            customModalDefaults = {};
        customModalDefaults.backdrop = 'static';
        return this.show(customModalDefaults, customModalOptions);
    };

    this.show = function(customModalDefaults, customModalOptions) {

        //Create temp objects to work with since we're in a singleton service
        var tempModalDefaults = {};
        var tempModalOptions = {};

        //Map angular-ui modal custom defaults to modal defaults defined in service
        angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

        //Map modal.html $scope custom properties to defaults defined in service
        angular.extend(tempModalOptions, modalOptions, customModalOptions);

        if (!tempModalDefaults.controller) {
            tempModalDefaults.controller = function($scope, $modalInstance) {
                $scope.modalOptions = tempModalOptions;
                $scope.modalOptions.ok = function(result) {
                    $modalInstance.close(result);
                };
                $scope.modalOptions.close = function(result) {
                    $modalInstance.dismiss('cancel');
                };
            };
        }

        return $modal.open(tempModalDefaults).result;
    };

} ]);

index.js

var app = angular.module('emaApp', []);

app.controller('mainCtrl',['$scope', '$http', 'modalService', function($scope, $http, modalService) {

    $scope.deleteModel = function(modelId) {

        var modalOptions = {
            closeButtonText : 'Cancel',
            actionButtonText : 'Delete Customer',
            headerText : 'Delete ' + modelId + '?',
            bodyText : 'Are you sure you want to delete this model?'
        };

        modalModule.showModal({}, modalOptions).then(function(result) {
            //your-custom-logic
            alert("muaha")
        });
    }

}]);

Answer 1

您正在多次定义模块emaApp。因此覆盖现有模块，您需要在稍后加载的文件中检索模块，即 index.js，注意删除 []

var app = angular.module('emaApp');

而不是

var app = angular.module('emaApp', []);

Answer 2

您已经将服务注入到您的控制器中。您应该在控制器中使用 modalService 而不是 - 可能 - undefined modalModule。