JSONP 查询和 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，它不是 angular 的一部分。

每当您使用 angular 核心之外的代码对范围进行更改时，您需要告诉 angular 到运行使用 [= 使用范围更改更新视图的摘要12=].

我建议您改为使用 $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();
       });

JSONP 查询和 AngularJS

JSONP Query and AngularJS

javascript

jquery

jsonp

callback

angularjs