javascript - Angular JS : Increment a Counter in a Service From Controller

Question

我正在尝试从我的服务中的 API 获取计数器的值，然后在我的 Controller 中递增该计数器:

服务

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 服务是单例的，因此您可以创建变量并在 Controller 之间共享它。

请注意下面变量 total 是如何在服务中初始化的。通过使用 getCounter() 方法，相同的变量用于与 Controller 交互。

另请注意 init() 方法。您的 Controller 可以首先调用 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