CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
realph
realph

Reputation: 4671

Angular JS: Increment a Counter in a Service From Controller

I'm trying to fetch a value from an API inside my service for a counter, and then increment on that counter inside my controller:

service

angular.module('app')
.factory('MyService', MyService)

function MyService($http) {
  var url = 'URL;

  return {
    fetchTotal: function(p) {
      return $http.get(url, { params: p })
        .then(function(response) {   
          var total = response.data.meta.total;
          return total;
        }, function(error) {
          console.log("error occured");
        })
    },
    incrementCounter: function(){
      total++;
    }
  }
}

controller

app.controller('Controller1', function ($scope, MyService) {
    var params = {
       ...
    }

    MyService.fetchTotal(params).then(function(response) {
      $scope.counter = response;
    });

    $scope.incrementCounter = function(){
        MyService.incrementCounter();
    }
});

view

<div ng-controller="Controller1">
    {{ counter }}
    <span ng-click="incrementCounter()">increment</span>  
</div>

I can't work out how increment on that total I get back from the API with an ng-click. Is this possible?

Any help is appreciated. Thanks in advance!

Upvotes: 2

Views: 1745

Answers (2)

Jahongir Rahmonov
Jahongir Rahmonov

Reputation: 13753

Looks like you are doing everything right, except the variable total.

You should initialize it in an upper level so that it is also visible from incrementCounter function:

function MyService($http) {
  var url = 'URL;
  var total = 0; 

  return {
    fetchTotal: function(p) {
      return $http.get(url, { params: p })
        .then(function(response) {   
          total = response.data.meta.total;
          return total;
        }, function(error) {
          console.log("error occured");
        })
     },
     incrementCounter: function(){
       total++;
     }
  }
}

Hope it helps

Upvotes: 0

Angad
Angad

Reputation: 3429

Angularjs services are singletons, so you can create variables and share it among controllers.

Notice below how variable total is initialized in the service. Same variable is used for interaction with the controllers by using the getCounter() method.

Also notice the init() method. Your controller can call MyService.init first thing to initialize the total variable.

angular.module('app')
.factory('MyService', MyService)

function MyService($http) {
  var url = 'URL';
  var total = 0; /* or some other initial value*/

  return {

    init: function(){
      $http.get(url, { params: p })
        .then(function(response) {   
          total = response.data.meta.total;

        }, function(error) {
          console.log("error occured");
        });
    },
    incrementCounter: function(){
      total++;
    },
    getCounter: function(){
     return total;
    }
  }
}

See plunker for demo: http://plnkr.co/edit/idSxgm0axk43ydThTbJF?p=preview

Upvotes: 1

Related Questions