Angular JS：从控制器增加服务中的计数器

Question

我正在尝试从我的服务内的 API 中获取一个计数器的值，然后在我的控制器内的该计数器上递增：

服务

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++;
    }
  }
}

控制器

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

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

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

看法

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

我无法计算出通过ng-click从 API 返回的总数的增量。 这可能吗？

任何帮助表示赞赏。 提前致谢！

Answer 1

Angularjs 服务是单例的，因此您可以创建变量并在控制器之间共享它。

请注意以下变量total在服务中是如何初始化的。 使用getCounter()方法使用相同的变量与控制器进行交互。

还要注意 init() 方法。 您的控制器可以首先调用MyService.init来初始化total变量。

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;
    }
  }
}

见 plunker 演示： http ://plnkr.co/edit/idSxgm0axk43ydThTbJF?p=preview

Answer 2

看起来你做的一切都正确，除了变量total 。

您应该在较高级别对其进行初始化，以便它也可以从incrementCounter函数中看到：

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++;
     }
  }
}

希望能帮助到你