用 AngularJS MVC 架構時，想撈出資料後，再動態用 Google Visualization API 繪出資料。然而，在 AngularJS 架構下，不該怎樣偵測它已經完成呈現部分(rendered a template)，依照原理，只好看看何時能取得到某物件(document.getElementById("tag_id"))。
Javascript:
(function(){
$scope.$watch(function(){
return document.getElementById(tag);
},function(value){
var val = value || null;
if(val) {
// doing...
}
});
})();
HTML:
<body ng-controller="appControl">
<div ng-repeat="item in data" id="{{item.id}}">{{item.id}}</div>
</body>
由於 <DIV> 是依照 AngularJS 架構產生的，而 Google Visualization API 需要綁定在某個 div 物件上，因此才需要去偵測 AngularJS 到底將 div 呈現出來了沒。
範例：
<script type='text/javascript' src='//www.google.com/jsapi'></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['corechart']});
function appControl($scope, $http, $location) {
$scope.data = null;
$scope.query = function() {
$http.get('/api', {}).success(function(data){
$scope.data = data;
for( var i=0 ; i<data.length ; ++i ) {
(function(){
var job_id = data[i]['id'];
var job_title = data[i]['title'];
var job_data = data[i]['data'];
$scope.$watch(function(){
return document.getElementById(job_id);
}, function(value) {
var check = value || null;
if(check) {
var data = new google.visualization.arrayToDataTable(job_data, true);
var options = { title: job_title, is3D: true };
//var chart = new google.visualization.PieChart(document.getElementById(job_id));
var chart = new google.visualization.PieChart(check);
chart.draw(data, options);
}
});
})();
}
}).error(function(data){
});
};
$scope.query();
}
</script>
