AngularJs指令看異步數據

Question

我想用一些ajax數據使用prettyprint。問題是當指令被調用時，數據沒有準備好，所以我得到未定義的變量輸出。

Plunkr：http://plnkr.co/edit/fdRi2nIvVzT3Rcy2YIlK?p=preview

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

app.controller('MainCtrl', function($scope,$http) { 


$scope.result = $http.get('data.json').success(function(result){ 
    return result.data.dom 
}) 

}); 


app.directive('prettyprint', function() { 
return { 
    restrict: 'C', 
    link: function postLink(scope, element, attrs) { 
      element.html(prettyPrintOne(scope.result)) 
    } 
}; 
}); 

Answer 1

使用scope的$watch方法：

scope.$watch("result" , function(n,o){ 
     element.html(prettyPrintOne(scope.result)); 
}) 

，而是這個：

$scope.result = $http.get('data.json').success(function(result){ 
     return result.data.dom 
}) 

使用此：

$http.get('data.json').success(function(result){ 
     $scope.result = result.dom; 
}) 

普拉克：http://plnkr.co/edit/Autg0V