AngularJS: factory function undefined in controller

I used to work the same way as before and it drove me crazy. I want to make a $ http GET call to a factory and then return the result to a controller to be processed.

factory (ignore the request url madness):

App.factory('MessageFactory', function ($http) {
        var MessageFactory = {
            getCast: function () {
                var request = {
                    method: "GET",
                    url: spHostUrl + "/_api/web/Lists/getByTitle('" + listTitle + "')/items?$select=AuthorId,Author/Name,Author/Title,Type_x0020_message,Title,Modified,Body,Expires,Attachments&$expand=Author/Id",
                    headers: {
                        "Content-Type": "application/json;odata=verbose",
                        "Accept": "application/json;odata=verbose"
                    }
                };

                $http(request)
                .then(function (res) {
                    return res.data;
                }).catch(function (res) {
                    console.error("error ", res.status, res.data);
                }).finally(function () {
                    console.log("end");
                });
            }
        };
        return MessageFactory;
    });

      

Now the controller :

App.controller('MessageController', function ($scope, $http, $log, $attrs, MessageFactory) {
        $scope.messages = MessageFactory;
        MessageFactory.getCast().then(function (asyncCastData) {
            $scope.messages.cast = asyncCastData;
        });
        $scope.$watch('messages.cast', function (cast) {
            //do stuff
        });
});

      

When testing, I get the following error:

Error: MessageFactory.getCast (...) - undefined @ /Scripts/App.js: 167: 9

Line 167 is indeed this line in the controller

MessageFactory.getCast().then(function (asyncCastData) {

      

My app works fine for any other function, so my problem appeared when adding this part and I'm pretty sure my controller doesn't know my factory yet and thus will try to access its function. Since this is an asynchronous call, it should work with the code in the controller. Thanks.

+3


source to share


1 answer


You must receive. then of undefined error

Because you missed to return a promise from a service method.



Service

var MessageFactory = {
  getCast: function() {
    var request = {
      method: "GET",
      url: spHostUrl + "/_api/web/Lists/getByTitle('" + listTitle + "')/items?$select=AuthorId,Author/Name,Author/Title,Type_x0020_message,Title,Modified,Body,Expires,Attachments&$expand=Author/Id",
      headers: {
        "Content-Type": "application/json;odata=verbose",
        "Accept": "application/json;odata=verbose"
      }
    };

    return $http(request) //returned promise from here
      .then(function(res) {
        return res.data;
      }).catch(function(res) {
        console.error("error ", res.status, res.data);
      }).finally(function() {
        console.log("end");
      });
    }
};

      

+3


source







All Articles