Angular JS: Increment a Counter in a Service From Controller

Question

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!

`$scope.counter += response` or `$scope.counter++` without using the response may work — Explosion Pills, Oct 29 '15 at 01:20
I need the counter to update in the service, because that `total` is used by two different controllers, and I use the service to keep them in sync. — realph, Oct 29 '15 at 01:22
That doesn't work. It just increments the total upwards from 0. — realph, Oct 29 '15 at 01:33
See if this related post helps you: http://stackoverflow.com/questions/16023451/binding-variables-from-service-factory-to-controllers — charliebrownie, Oct 29 '15 at 01:54

Angad · Answer 1 · 2015-10-29T13:12:09.447

1

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

edited Oct 29 '15 at 13:12

answered Oct 29 '15 at 01:56

Angad

3,389
3
30
40

This is what my controller looks like. `MyService.fetchTotal(params).then(function(response) { $scope.counter = MyService.getCounter(); });`. If I put a `console.log()` on the `incrementCounter()` function, I can see the total going up in the console. However, the {{ counter }} on the view doesn't increment. – realph Oct 29 '15 at 09:16
The view is looking at `$scope.counter`, not the variable `total` in `MyService`. `$scope.counter` and `total` are detached. Change in one will not effect the other. You'll have to use a controller function in your view that returns you the latest value of `total` – Angad Oct 29 '15 at 12:27

score 0 · Answer 2 · answered Oct 29 '15 at 13:19

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

Angular JS: Increment a Counter in a Service From Controller

2 Answers2