Injecting service to controller fails in angularJS

Question

My code is like this

Controller.js
var errorMessage = { MessageHeader: "Error", Message: "Something went wrong. Please try again later." };
    angular.module('RateRequestApp.controllers', []).controller('ReadOnlyController', [
    '$scope',  'updateTruckNoService', 'messageModalService', '$modal',
    function ($scope,  updateTruckNoService, messageModalService, $modal) {

        messageModalService.showMessageModal(errorMessage);
    }
]);
Services.js
angular.module('RateRequestApp.services').factory('messageModalService', [ '$modal', messageModalService]);
function messageModalService($modal) {
    function showMessageModal(response) {
        var modalInstance = $modal.open({
            templateUrl: 'MessageModal.html',
            controller: 'ModalInstanceCtrl',
            resolve: {
                items: function () {
                    return response;
                }
            }
        });
    };
}

App.JS
angular.module('RateRequestApp', [
   'RateRequestApp.services',
   'RateRequestApp.controllers',
   'ui.bootstrap',
   'angular-loading-bar'
]);

Everything looks okay to me, But this throws an error

TypeError: Cannot read property 'showMessageModal' of undefined

at line

  messageModalService.showMessageModal(errorMessage);

JLRishe · Accepted Answer · 2014-12-22 07:31:41Z

2

The showMessageModal function is just defined in your messageModalService function. You're not returning it, so nobody can access it.

In fact, you're not returning anything, so your factory is producing undefined when it is invoked.

function messageModalService($modal) {
    function showMessageModal(response) {
        // ...
    }

    return {showMessageModal: showMessageModal};
}

or you can also just do:

function messageModalService($modal) {
    return {
        showMessageModal: function (response) {
            // ...
        }
    };
}

edited Dec 22, 2014 at 7:31

answered Dec 22, 2014 at 7:10

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nitin · Accepted Answer · 2014-12-22 07:27:17Z

1

It is simple that your service "messageModalService" is not returning the method 'showMessageModal', try to return form the methd messageModalService like below sample, it should work :)

return{
    showMessageModal: showMessageModal
};

answered Dec 22, 2014 at 7:27

nitin

1562 silver badges13 bronze badges

Collectives™ on Stack Overflow

Injecting service to controller fails in angularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related