JSONP Query и AngularJS

Question

JSONP Query и AngularJS

0

Я пытаюсь выполнить итерацию по массиву имен пользователей и добавить результирующие запросы 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 сможет обновить?

Jeeves 25 авг. 2015, в 04:23

Источник

Теги:

javascript

jquery

angularjs

callback

jsonp

1 ответ

Ещё вопросы

charlietfl · Accepted Answer · 2015-08-24T23-55-00.000Z

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

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

Я бы предложил вам конвертировать вместо $http.jsonp вместо этого, который будет обрабатывать внутренние $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();
       });

Это работает. Пробовал с $ http.jsonp, но я получил ошибку политики XML Cross-Origin, поэтому я использую $ .getJSON, потому что у сайта есть разрешение на обратный вызов JSONP.
просто означает, что вы не используете $http.jsonp должным образом