AngularJS JSONP问题

时间:2013-09-09 00:14:03

标签: jquery angularjs jsonp

我可以使用

获取数据
 $http.jsonp("http://url/GetAll?callback=JSON_CALLBACK").
            success(function(data, status, headers, config) {

                console.log(JSON.stringify(data));
                $scope.eventSource = JSON.stringify(data);
            }).
            error(function(data, status, headers, config) {
                alert("ERROR: Could not get data.");
            });

我知道我也可以使用回调方法来获取这样的数据:

$.ajax({
        url: "http://url/GetAll",
        type: 'GET',
        dataType: 'jsonp',            
        jsonp: 'callback',
        jsonpCallback: 'myCallback'
    });

    myCallback = function (data) {
        alert(data);
        //$scope.eventSource = JSON.stringify(data);
    }

不幸的是,我需要将它作为工厂或服务,并在模块内部进行调用。所以我尝试的是这样做,但它不起作用:

app.factory('calendarFactory', function ($http) {
return {
    query: function () {            
        var promise = $http.jsonp("http://url/GetAll?callback=JSON_CALLBACK").
            success(function (data, status) {

                //console.log(JSON.stringify(data));
                //myData = JSON.stringify(data);
                return JSON.stringify(data);
            }).
            error(function (data, status, headers, config) {
                alert("ERROR: Could not get data.");
            });

        return promise;
    }
}

});

控制台打印数据..但是当我尝试将其添加到范围变量时,它不起作用..

 $scope.eventSource = calendarFactory.query();

脚本引用都很好,因为它适用于虚拟数据。请不要说回调方法是必需的。看看我的第二个脚本。这有一个回调方法。我需要第三个脚本才能工作。因为我没有在第四个脚本中获取数据,所以肯定是错的。

更新更新:

我将控制器更改为:

 $scope.eventSource = [];
calendarFactory.query().success(function (data) {
        //myVar = JSON.stringify(data);
        console.log(JSON.stringify(data));
        $scope.eventSource = JSON.stringify(data);
});



console.log($scope.eventSource);

现在虽然这更有希望,但问题是首先显示日志[]然后是数据。这意味着工厂电话很晚才发生。坚持改变太迟了。我尝试使用 $ scope。$ watch('eventSource',function(){同一工厂调用} ,但这也不起作用。

现在,我真的很想让这个工作。我甚至可以考虑一个可以解决问题的自定义JQuery函数。

更多更新.. 所以我现在尝试使用诺言..

app.service('calendarFactory', function ($http, $q) {
return {
    query: function () {

        var deferred = $q.defer();
        $http({ method: "jsonp", url: URL })
            .success(function (data, status, headers, config) {
                deferred.resolve(data);
                //console.log(JSON.stringify(data));
            }).error(function (data, status, headers, config) {
                deferred.reject(data);
            });            
        return deferred.promise;
    }

}

});

$scope.eventSource = calendarFactory.query();

$scope.eventSource.then(function (items) {
    $scope.eventSource = JSON.stringify(items);
    //console.log(JSON.stringify(items));
}, function (status) {
    console.log(status);
});

但它仍然没有更新页面。

有人可以展示一个生成JSONp请求的角度服务的工作样本吗?

1 个答案:

答案 0 :(得分:0)

使用$ resource处理JSONP请求更容易。

app = angular.module('myApp', ['ngResource'])
app.service('calendarFactory', function ($resource, $q) {
    return {
        query: function () {
            return $resource(URL, {
                get: {
                    method: 'jsonp'
                }
            });
        }
    }
});

function Ctrl($scope, calendarFactory) {
    $scope.eventSource = calendarFactory.query().get();
}