AngularJs directive watching async data

Question

I'm trying to use prettyprint with some ajax data. The problem is that when the directive is invoked, the data arem't ready, so I get undefined variable output.

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))
    }
};
});

Ivan Chernykh · Accepted Answer · 2013-09-23 06:19:39Z

5

Use scope's $watch method:

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

And instead of this:

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

Use this:

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

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

edited Sep 23, 2013 at 6:19

answered Sep 23, 2013 at 6:12

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs directive watching async data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related