How to load/inject a service in the main app controller?

Question

I am trying to implements a modal from this answer but I fail to use the service in the app controller. The question is simple: How can I use the modalService via injection in the emaApp main controller?

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

}]);

have you included service file in your index.html page. @displayname — Mohammed, Feb 03 '17 at 11:32

score 1 · Accepted Answer · answered Feb 03 '17 at 11:28

You are defining module emaApp multiple times. Hence overwriting the existing module, You need to retrieve module in file which is loaded later i.e. index.js, notice removed []

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

instead of

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

score 0 · Answer 2 · answered Feb 03 '17 at 11:33

0

You already injected the service into your controller. You should use modalService instead of -possibly- undefined modalModule in your controller.

answered Feb 03 '17 at 11:33

Kursad Gulseven

1,978
1
24
26

How to load/inject a service in the main app controller?

2 Answers2