Cannot access service from controller angularjs

Question

I'm working on an angular project, where I'm adding new functionality to an older project.
I'm trying to register a service with my controller but getting an error where my controller is unable to find the functions in the service.

Here's how my controller is defined (I know it's not the standard way, but I have to follow this because the entire application does.)

angular.module("test").controller("listCtrl", listCtrl);
listCtrl.$inject = ["$scope", "$state", "$timeout", "listService", "$rootScope"];

function listCtrl($scope, $state, $timeout, listService, $rootScope ) {
  this.$scope= $scope;

  $scope.service=listService;
  //some other definitions

  $scope.items = $scope.service.getPage(%function_ARGUMENTS%);

}

Here's how the service is defined:

angular.module("test").service("listService", listService);
listService.$inject = ['$state', '$rootScope'];

function listService($state, $rootScope) {
   function getPage(%function_ARGUMENTS%) {
     //getPage function definition goes here
   }
}

Now, for some reason, I get the error:

Cannot read property 'getPage' of undefined

I cannot figure out what might be causing this.
Is the problem with how $scope is defined? If yes, then what would be the correct way to do this, assuming this.$scope=$scope cannot be modified.

EDIT: Fixed the plural typo in the question. I do not have that typo in my program, it was a mistake I made while typing on SO.

You have typo in $scope.services.getPage(%function_ARGUMENTS%); it must be $scope.service.getPage(%function_ARGUMENTS%); — Ankit Vadi
– Ankit Vadi, Commented Feb 23, 2017 at 9:55
I fixed the typo in the question, the typo isn't what's causing the error in my main program. — ChaoticTwist
– ChaoticTwist, Commented Feb 23, 2017 at 10:20
I posted answer too, anyways, you figured out the problem is important. — Ankit Vadi
– Ankit Vadi, Commented Feb 23, 2017 at 10:37

Satpal · Accepted Answer · 2017-02-23 09:52:17Z

1

Error is expected as you have defined $scope.service where as using $scope.services notice additional "s". So use correct variable

$scope.items = $scope.service.getPage(%function_ARGUMENTS%);

However, you will s till get another error as the function getPage with associated with return service object.

function listService($state, $rootScope) {
   this.getPage = function() {
     //getPage function definition goes here
   }
}

OR,

function listService($state, $rootScope) {
   function getPage () {
     //getPage function definition goes here
   }

   this.getPage = getPage;
}

edited Feb 23, 2017 at 9:52

answered Feb 23, 2017 at 9:46

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

ChaoticTwist Over a year ago

Fixed the typo in the question. Your answer helped. I didn't register the function to the service. Thanks. :)

Ankit Vadi · Accepted Answer · 2017-02-23 09:51:01Z

1

angular.module("test").factory("listService", listService);
listService.$inject = ['$state', '$rootScope'];    

function listService($state, $rootScope) {
   return {
      function getPage(%function_ARGUMENTS%) {
         //getPage function definition goes here
      }
   }
}

Just write above as you Service function.

answered Feb 23, 2017 at 9:51

Ankit Vadi

4754 silver badges10 bronze badges

Comments

David Wayne Griffith · Accepted Answer · 2017-02-23 10:02:33Z

I also noticed: $scope.items = $scope.services.getPage(%function_ARGUMENTS%);

should be: $scope.items = $scope.service.getPage(%function_ARGUMENTS%);

$scope.service was pluralized on that line when it should be singular.

As well you are using a service service, which is a constructor function. Therefore you need to reference your properties with the this keyword. The angular service method creates the object internally using the new keyword. You could try a factory:

angular.module("test")
  .factory("listService", listService);
  listService.$inject = ['$state', '$rootScope'];

  function listService($state, $rootScope) {
    function getPage(%function_ARGUMENTS%) {
      //getPage function definition goes here
    }
    return {
      getPage: getPage
    };
 }

This is more similar to what you had and you do not need to use the this keyword since it not a constructor function.

Hope this helps!

Cheers

Collectives™ on Stack Overflow

Cannot access service from controller angularjs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related