Angularjs unable to call factory method from javascript function

Question

I am developing angularjs application. I have one javascript function to fill dropdown. I am making http call to get data from api. I have factory to return data. Below is code.

function fillperiod(fillperiodService) {
  fillperiodService.getData().then(function(res) {
    $scope.cal = response.data.data.Period;
  });
}
myapp.factory('fillperiodService', ['$http', '$cookieStore', 'cfg', '$q', function($http, $cookieStore, cfg, $q) {
  var baseurl = cfg.Baseurl;
  var urlapi = baseurl + "api/Vehicle/GetEMIPeriod";
  return {
    getData: function() {
      var q = $q.defer();
      $http.get(urlapi).then(function(response) {
        q.resolve(response);
      }, function(error) {
        q.reject();
      })
      return q.promise;
    }
  }
}]);

Above code throws error:

Cannot read property 'getData' of undefined.

I have declared method getData. I am not sure what i am missing in the above code. May i get some help to fix this issue? Any help would be appreciated. Thank you.

This won't fix your problem but there is no need to use $q in your factory, just return $http.get() as that is already a promise. — George
– George, Commented Jul 19, 2017 at 12:34
you need to call fillperiod in angular context from where you will pass fillperiodService to it, or it need to be a controller/service where fillperiodService is injected — Koushik Chatterjee
– Koushik Chatterjee, Commented Jul 19, 2017 at 12:34
there you need to inject fillperiodService and have to pass that instance to fillperiod — Koushik Chatterjee
– Koushik Chatterjee, Commented Jul 19, 2017 at 12:41

Bala Abhinav · Accepted Answer · 2017-07-19 12:46:50Z

2

It seems like the factory is not injected into your controller. Hence, Inside your function, fillperiodService is undefined. Inject the factory into the controller from which you want to call one of its methods. then it will work.

EDIT : 
myapp.controller('fillPeriod', ['fillperiodService', function(fillperiodService){
    //here you can call your fillpersiodService.methodName
}])

edited Jul 19, 2017 at 12:46

answered Jul 19, 2017 at 12:42

Bala Abhinav

1,3481 gold badge9 silver badges15 bronze badges

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

6 Comments

Niranjan Godbole Over a year ago

Thank you. Is it possible to inject factory inside button click?

Bala Abhinav Over a year ago

No you would have to inject it in the controller when initialising itself. Please check my edited answer in 10 seconds

Niranjan Godbole Over a year ago

I understood. How can i inject fillperiodService and pass that instance to fillperiod? Any example? I have $scope.SaveSimahVerification = function () { fillperiod} something like this! How can i inject my factory here?

Bala Abhinav Over a year ago

glad to help :-)

Niranjan Godbole Over a year ago

Thank you. I have one think to ask. I am making lot of api calls! Is it good practice to use $q in each http request?

|

pgreen2 · Accepted Answer · 2017-07-19 12:47:28Z

1

The injection mechanisms within AngularJS only work for creating things that AngularJS understands (controllers, services, filters, ...). From the looks of it, you have just a stand alone function, which isn't injected by AngularJS.

I would expect a solution that looks closer to the following would work:

myapp.controller('FillPeriodController', ['$scope', 'fillperiodService', 
  function($scope, fillperiodService) {
    $scope.fillperiod = fillperiod;

    function fillperiod() {
      fillperiodService.getData().then(function(res) {
        $scope.cal = response.data.data.Period;
      });
    }
}]);

answered Jul 19, 2017 at 12:47

pgreen2

3,6713 gold badges37 silver badges59 bronze badges

Comments

Kamil Mikosz · Accepted Answer · 2017-07-19 12:46:51Z

0

To answer this question we need to know the context from where you are invoking this function. In that context you should check if this factory is injected.

answered Jul 19, 2017 at 12:46

Kamil Mikosz

112 bronze badges

1 Comment

Kamil Mikosz Over a year ago

For your example something like that: $scope.SaveSimahVerification = ['fillperiodService', function (fillperiodService) { fillperiod}]

Collectives™ on Stack Overflow

Angularjs unable to call factory method from javascript function

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related