AngularJS圖指令 - 異步服務中加載的數據不更新圖表

Question

我有一個圖表指令創建，我加載谷歌API後bootstrpping應用程序。在下面的代碼中，一個簡單的數據表工作正常。但是當我以異步的方式從服務器加載數據時，圖表沒有被顯示。

控制器

'use strict'; 

myNetaInfoApp.controller('allCandidatesController', [ 
    '$scope','allCandidates2009Svc', '$timeout', 
    function ($scope, allCandidates2009Svc, $timeout) { 
     $scope.data1 = {}; 
     $scope.data1.dataTable = new google.visualization.DataTable(); 
     $scope.data1.dataTable.addColumn("string", "Party"); 
     $scope.data1.dataTable.addColumn("number", "qty"); 
     $scope.data1.dataTable.title = "ASDF"; 
     $timeout(function (oldval, newval) { 
      allCandidates2009Svc.GetPartyCriminalCount().then(function(netasParty) { 
       var i = 0; 
       for (var key in netasParty) { 
        $scope.data1.dataTable.addRow([key.toString(), netasParty[key]]); 
        i++; 
        if (i > 20) break; 
       } 
      }); 
     }); 
     $scope.dataAll = $scope.data1; 
     //sample data 
     $scope.data2 = {}; 
     $scope.data2.dataTable = new google.visualization.DataTable(); 
     $scope.data2.dataTable.addColumn("string", "Name"); 
     $scope.data2.dataTable.addColumn("number", "Qty"); 
     $scope.data2.dataTable.addRow(["Test", 1]); 
     $scope.data2.dataTable.addRow(["Test2", 2]); 
     $scope.data2.dataTable.addRow(["Test3", 3]); 
    } 
]); 

服務

'use strict'; 

myNetaInfoApp.factory('allCandidates2009Svc', ['$http', '$q', 
    function ($http, $q) { 
     var netas; 
     return { 
      GetPartyCriminalCount: function() { 
       var deferred = $q.defer(); 
       $http.get('../../data/AllCandidates2009.json') 
       .then(function (res) { 
        netas = res; 
        if (netas) { 
         var finalObj = {}; 
         _.each(netas.data, function(neta) { 
          finalObj[neta.pty] = finalObj[neta.pty] ? finalObj[neta.pty] + 1 : 1; 
         }); 

         deferred.resolve(finalObj); 
        } 
       }); 
       return deferred.promise; 
      } 
     }; 
    }]); 

指令

"use strict"; 

var googleChart = googleChart || angular.module("googleChart", []); 

googleChart.directive("googleChart", function() { 
    return { 
     restrict: "A", 
     link: function ($scope, $elem, $attr) { 
      var dt = $scope[$attr.ngModel].dataTable; 

      var options = {}; 
      if ($scope[$attr.ngModel].title) 
       options.title = $scope[$attr.ngModel].title; 

      var googleChart = new google.visualization[$attr.googleChart]($elem[0]); 
      $scope.$watch($attr.ngModel, function (oldval, newval) { 

       googleChart.draw(dt, options); 
      }); 

     } 
    }; 
}); 

HTML

<div ng-controller="allCandidatesController"> 
    <div class="col-lg-6"> 
     <h2>Parties and Candidates with Criminal Charges</h2> 
     <div google-chart="PieChart" ng-model="dataAll" class="bigGraph"></div> 
     <!--<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>--> 
    </div> 

    <div class="col-lg-6"> 
     <h2>Heading</h2> 
     <div google-chart="BarChart" ng-model="data2" class="bigGraph"></div> 
    </div> 

</div> 

Answer 1

我認爲你需要用scope.$apply()將你的功能體包裝在allCandidates2009Svc工廠中。但是退貨deferred.resolve()將在scope.$apply()之外。

function asyncGreet(name) { 
var deferred = $q.defer(); 

setTimeout(function() { 
// since this fn executes async in a future turn of the event loop, we need to wrap 
// our code into an $apply call so that the model changes are properly observed. 
scope.$apply(function() { 
deferred.notify('About to greet ' + name + '.'); 

if (okToGreet(name)) { 
deferred.resolve('Hello, ' + name + '!'); 
} else { 
deferred.reject('Greeting ' + name + ' is not allowed.'); 
} 
}); 
}, 1000); 

return deferred.promise; 
} 

閱讀這裏的文檔

http://docs.angularjs.org/api/ng.$q