2014年3月4日 星期二

[Javascript] 偵測 AngularJS rendered a template - 以 Google Visualization API 應用為例

用 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>

沒有留言:

張貼留言