角JS：增加一个计数器的服务从控制器

我试图获取从我的柜台服务内的API值，然后在我的控制器内部的计数器递增：角JS：增加一个计数器的服务从控制器

服务

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>

我无法工作，如何对总我从API回来了，还ng-click增量。这可能吗？

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

来源

2015-10-29 realph

'$ scope.counter + = response'或'$ scope.counter ++ '不使用响应可能会工作 –

我需要计数器在服务中更新，因为'total'由两个不同的控制器使用，并且我使用服务来保持它们同步。 – realph

将'var total = 0'移动到'var url =' –

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

来源

2015-10-29 01:56:55 Angad

这就是我的控制器的外观喜欢。（函数（响应）{scope.Counter = MyService.getCounter（）; }）;'。如果我在'incrementCounter（）'函数中放置了一个'console.log（）'，我可以看到控制台中的总数增加了。但是，视图上的{{counter}}不会增加。 – realph

该视图正在查看'$ scope.counter'，而不是'MyService'中的变量'total'。 '$ scope.counter'和'total'分离。更换一个不会影响另一个。您必须在您的视图中使用控制器功能，才能返回“total”的最新值 – Angad

我也进行了一些编辑，检出plunkr。 – Angad

看起来你正在做的一切权利，除非该变量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++; 
    } 
    } 
}

希望它可以帮助

来源

2015-10-29 13:19:08

角JS：增加一个计数器的服务从控制器

回答

相关问题