Compilazione di $ scope usando .getJSON()

Question

Ho iniziato a giocare con Angular.js di recente e ho ottenuto un progetto dimostrativo che funziona piuttosto bene. Tuttavia, quando ho tentato di caricare i dati da un servizio Web di back-end rispetto a un array hard coded, ho iniziato a rimanere bloccato. In particolare, la pagina non sembra correttamente legata ai dati dopo aver impostato $ scope usando $ .getJSON(). Done (...). Invece di assegnare un valore a $ scope dopo aver fatto .getJSON, dovrei farlo da qualche altra parte/in modo diverso? Ho cercato in alto e in basso e davvero non riuscivo a trovare alcun buon esempio di questo angolare che estraeva i dati iniziali da un back-end.

Grazie in anticipo per qualsiasi aiuto con questo!

Answer 1

Poiché si sta tentando di aggiornare $scope fuori da Angular, è necessario apportare modifiche al modello utilizzando il metodo $apply sull'oscilloscopio.

Forse qualcosa di simile:

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

Il modo migliore per accedere a un back-end con AngularJS sarebbe quella di utilizzare il servizio $http o $resource al posto di jQuery. Non è necessario utilizzare $scope.$apply per aggiornare direttamente il tuo $scope.modelData.

This post ha un buon fiddle di aggiornamento di un modello al di fuori del codice angolare.

Answer 2

o invece di avvolgere con applicazione, basta chiamare alla fine della funzione di callback come

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