Poblando $ scope usando .getJSON()

Question

Empecé a jugar con Angular.js recientemente, y obtuve un proyecto de demostración que funciona bastante bien. Sin embargo, cuando intenté cargar los datos de un servicio web de backend frente a una matriz codificada, empecé a colgar. Específicamente, la página no parece enlazar los datos correctamente después de configurar el $ scope usando $ .getJSON(). Done (...). En lugar de simplemente asignar un valor a $ scope después de que .getJSON esté listo, ¿debería hacerlo en otro lugar/de manera diferente? Busqué en alta y baja y realmente no pude encontrar ningún buen ejemplo de angular que está sacando datos iniciales de un back-end.

¡Gracias de antemano por su ayuda con esto!

Answer 1

Dado que está intentando actualizar el $scope fuera de Angular, deberá realizar los cambios de modelo utilizando el método $apply en el alcance.

Tal vez algo como:

$.getJSON('ajax/test.json', function(data) { 
     $scope.$apply(function(){ 
      $scope.modelData = data; 
     }); 
    }); 

La mejor forma de acceder a un backend con AngularJS sería utilizar el servicio $http o $resource en lugar de jQuery. No tendrá que usar $scope.$apply, simplemente puede actualizar su $scope.modelData directamente.

This post tiene una buena fiddle de actualizar un modelo fuera del código angular.

Answer 2

o en lugar de envolver con aplicar, simplemente llame al final de la función de devolución de llamada como

$.getJSON('ajax/test.json', function(data) { 
    $scope.data = data;   
    $scope.$apply(); 
});