AngularJs директива наблюдает async данные

Question

Я пытаюсь использовать prettyprint с некоторыми данными ajax. Проблема в том, что при вызове директивы данные не готовы, поэтому я получаю неопределенный вывод переменной.

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 «s $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; 
}) 

Plunk: http://plnkr.co/edit/Autg0V