JSONP Query and AngularJS

Question

Я пытаюсь выполнить итерацию по массиву имен пользователей и добавить результирующие запросы JSONP к массиву, который может отображаться с помощью AngularJS. Как следует:

HTML РАЗДЕЛ

<div id = "displayUL" ng-controller="userController"> 
    <ul> 
     <li ng-repeat="user in results">{{user.user}}<img ng-src="{{user.logo}}">{{user.etcetera}}</li> 
    </ul> 
</div> 

JAVASCRIPT РАЗДЕЛ

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

     app.controller('userController', function($scope,$http){ 
     //Our user name array 
     $scope.inputUsers= ["userA", "userB", "userC"]; 
     $scope.results = []; 
     //Loop through each user 
     $.each($scope.inputUsers,function(key,value){ 
      var currentUserData = {}; 
      currentUserData.user = value; 

      //URL Request - defined elsewhere with callback for JSONP 
      var currentURL = streamURL + value + callbackPostfix; 

      $.getJSON(currentURL, function(data){ 
       //Update temp obj with current data results 
       currentUserData.found = data.found 
       currentUserData.logo = data.logo; 
       ... 
       currentUserData.ecetera = data.ecetera; 
       //Update results array with current data obj 
       $scope.results.push(currentUserData); 
      }); 
     }); 

Когда это работает, массив результатов пуст. Сработает ли обратный вызов JSONP перед тем, как Angular сможет обновить?

Answer 1

Предполагая, что URL-адрес и ответ верны, ваша проблема заключается в использовании $.getJSON, который не является частью углового.

Всякий раз, когда вы вносите изменения в область с кодом, находящимся вне углового ядра, вам нужно указать угловое значение для запуска дайджеста, чтобы обновить представление с изменениями области с помощью $scope.$apply().

Я предлагаю вам вместо этого использовать $http.jsonp, который будет обрабатывать внутренние файлы.

 $.getJSON(currentURL, function(data){ 
      //Update temp obj with current data results 
      currentUserData.found = data.found 
      currentUserData.logo = data.logo; 
      ... 
      currentUserData.ecetera = data.ecetera; 
      //Update results array with current data obj 
      $scope.results.push(currentUserData); 
      // now time for a digest to update view 
      $scope.$apply(); 
     });