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 运行摘要以使用 $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();
       });