角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：增加一個計數器的服務從控制器

回答

相關問題