觀察angular-chart.js中的更改？

Question

我正在向rethinkdb數據庫發出請求，獲取信息並對其執行一些操作，以便獲得我需要的信息，然後用數據填充折線圖。我正在使用angular-chart.js指令，而我的問題是我需要在數據操作完成後基本重新呈現圖表。有沒有辦法讓我可以跟觀察員一起做這件事？

$scope.things = []; 
    $scope.chartData = ChartService.getAll(); 
    setTimeout(function() { 
    var length = $scope.chartData.$$state.value.data.length; 
    for (var i = 0; i < length; i++) { 
     $scope.things[i] = angular.copy($scope.chartData.$$state.value.data[i].State); 
    } 
    console.log("Things: " + $scope.things); 
    var object = {}; 
    var array = $scope.things; 
    for (var i = 0, j = array.length; i < j; i++) { 
     object[array[i]] = (object[array[i]] || 0) + 1; 
    } 
    console.log("Object: " + JSON.stringify(object)); 
    $scope.labels = [object]; 
    console.log("Labels: " + $scope.labels); 
    }, 2000); 

因此，我創建一個空數組，然後調用我的服務並將數據返回到數組中。然後我運行一個for循環來將每個數組元素的數量（在這種情況下，我回到不同的狀態縮寫）添加到一個對象。該對象看起來像{「AZ」：1，「OH」：5等....}。基本上，我需要這個圖形來重新渲染這個新數據。我假設一個觀察者將是答案，但任何建議都是值得歡迎的。謝謝！

Answer 1

我會讓ChartService返回一個承諾。這會讓你在獲得數據後進行操作/渲染。

var app = angular.module('plunker', []); 

app.controller('ChartController', function($scope, ChartService) { 
    ChartService.getAll().success(function(chartData) { 
    $scope.chartData = chartData; 
    // do you data manipulations here 
    // call your chart renderer here 
    }); 
}); 

app.factory("ChartService", function($http) { 
    var service = {}; 

    service.getAll = function() { 
    return $http.get("api/states").success(function(states) { 
     // do some stuff 
    }) 
    } 

    return service; 
})