javascript - 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() 更新 View 以及作用域更改。

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