Yelp API不使用Angular但可以使用JQuery

Question

我正在构建一个角度应用程序，我正在使用Yelp搜索和业务API。同时，我能够使用搜索API获取数据并显示它。当我进一步使用餐厅ID使用业务API获取详细信息时，我看到一些奇怪的东西。当我使用回调作为angular.callbacks._0时，数据不会在页面第一次加载时出现（仅在页面刷新后出现）。当我使用回调作为angular.callbacks._1时，数据是第一次出现，但在页面刷新后从视图中消失。如果我正在进行API调用，请告诉我。我附加了我创建的YelpService。问题是我打电话：findRestDetailsbyId（）。

注意：Yelp需要Oauth，数据类型是JSONP。

但是当我尝试使用JQuery ajax调用Business搜索API时，它运行正常。 JSONP数据和Angular回调是否存在已知问题？

我对这个奇怪的问题找不到多少帮助。

发布代码（这不起作用）： YelpService：

"use strict";
(function () {
angular
    .module("RestApp")
    .factory("YelpService",yelpService);

function yelpService($http){
    var api = {
        findRestbyNameLocation: findRestbyNameLocation,
        findRestDetailsbyId: findRestDetailsbyId
    };
    return api;

    function findRestbyNameLocation(restname, location, callback){
        if(!restname){
            restname="";
        }
        var accessor = {
            consumerSecret: auth.consumerSecret,
            tokenSecret: auth.accessTokenSecret
        };
        var parameters = [];
        parameters.push(['term', restname]);
        parameters.push(['location', location]);
        parameters.push(['limit', 10]);
        parameters.push(['category_filter', 'restaurants']);
        parameters.push(['callback', 'angular.callbacks._0']);
        parameters.push(['oauth_consumer_key', auth.consumerKey]);
        parameters.push(['oauth_consumer_secret', auth.consumerSecret]);
        parameters.push(['oauth_token', auth.accessToken]);
        parameters.push(['oauth_signature_method', 'HMAC-SHA1']);
        var message = {
            'action': 'http://api.yelp.com/v2/search',
            'method': 'GET',
            'parameters': parameters
        };
        OAuth.setTimestampAndNonce(message);
        OAuth.SignatureMethod.sign(message, accessor);
        var parameterMap = OAuth.getParameterMap(message.parameters);
        parameterMap.oauth_signature = OAuth.percentEncode(parameterMap.oauth_signature);

        $http.jsonp(message.action, {params: parameterMap}).success(callback);

    }

    function findRestDetailsbyId(restId, callback){
        var accessor = {
            consumerSecret: auth.consumerSecret,
            tokenSecret: auth.accessTokenSecret
        };
        var parameters = [];
        parameters.push(['callback', 'angular.callbacks._0']);
        parameters.push(['oauth_consumer_key', auth.consumerKey]);
        parameters.push(['oauth_consumer_secret', auth.consumerSecret]);
        parameters.push(['oauth_token', auth.accessToken]);
        parameters.push(['oauth_signature_method', 'HMAC-SHA1']);
        var message = {
            'action': 'http://api.yelp.com/v2/business/'+restId,
            'method': 'GET',
            'parameters': parameters
        };
        OAuth.setTimestampAndNonce(message);
        OAuth.SignatureMethod.sign(message, accessor);
        var parameterMap = OAuth.getParameterMap(message.parameters);
        parameterMap.oauth_signature = OAuth.percentEncode(parameterMap.oauth_signature);

        $http.jsonp(message.action, {params: parameterMap})
            .success(callback)
            .error(function(error){
                console.log("Error findRestDetailsbyId: ", error)
            });

    }

}
})();

调用上述服务的控制器：

"use strict";
(function () {
angular
    .module("RestApp")
    .controller("DetailController", DetailController);

function DetailController($scope, $routeParams, YelpService){
    $scope.restId = $routeParams.restId;

    YelpService.findRestDetailsbyId(
        $scope.restId,
        function(response){

            console.log(response);
            $scope.rest = response;
        }
    )
}
})();

使用Jquery ajax调用Yelp服务：（这个工作）

"use strict";
(function () {
    angular
        .module("RestApp")
        .factory("YelpService",yelpService);

    function yelpService($http){
        var api = {
            findRestbyNameLocation: findRestbyNameLocation,
            findRestDetailsbyId: findRestDetailsbyId
        };
        return api;

        function findRestbyNameLocation(restname, location, callback){
            if(!restname){
                restname="";
            }
            var accessor = {
                consumerSecret: auth.consumerSecret,
                tokenSecret: auth.accessTokenSecret
            };
            var parameters = [];
            parameters.push(['term', restname]);
            parameters.push(['location', location]);
            parameters.push(['limit', 10]);
            parameters.push(['category_filter', 'restaurants']);
            parameters.push(['callback', 'angular.callbacks._0']);
            //parameters.push(['callback', 'JSON_CALLBACK']);
            parameters.push(['oauth_consumer_key', auth.consumerKey]);
            parameters.push(['oauth_consumer_secret', auth.consumerSecret]);
            parameters.push(['oauth_token', auth.accessToken]);
            parameters.push(['oauth_signature_method', 'HMAC-SHA1']);
            var message = {
                'action': 'http://api.yelp.com/v2/search',
                //'action': 'http://api.yelp.com/v2/search?callback=JSON_CALLBACK',
                'method': 'GET',
                'parameters': parameters
            };
            OAuth.setTimestampAndNonce(message);
            OAuth.SignatureMethod.sign(message, accessor);
            var parameterMap = OAuth.getParameterMap(message.parameters);
            parameterMap.oauth_signature = OAuth.percentEncode(parameterMap.oauth_signature);

            $http.jsonp(message.action, {params: parameterMap}).success(callback);

        }
        function randomString(length) {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for(var i = 0; i < length; i++) {
                text += possible.charAt(Math.floor(Math.random() * possible.length));
            }
            return text;
        };

        function findRestDetailsbyId(restId, callback){
            var accessor = {
                consumerSecret: auth.consumerSecret,
                tokenSecret: auth.accessTokenSecret
            };
            var parameters = [];
            parameters.push(['callback', 'angular.callbacks._0']);
            //parameters.push(['callback', 'JSON_CALLBACK']);
            parameters.push(['oauth_consumer_key', auth.consumerKey]);
            parameters.push(['oauth_consumer_secret', auth.consumerSecret]);
            parameters.push(['oauth_token', auth.accessToken]);
            parameters.push(['oauth_signature_method', 'HMAC-SHA1']);
            var message = {
                'action': 'http://api.yelp.com/v2/business/'+restId,
                'method': 'GET',
                'parameters': parameters
            };
            OAuth.setTimestampAndNonce(message);
            OAuth.SignatureMethod.sign(message, accessor);
            var parameterMap = OAuth.getParameterMap(message.parameters);
            parameterMap.oauth_signature = OAuth.percentEncode(parameterMap.oauth_signature);

            //$http.jsonp(message.action, {params: parameterMap})
            //    .then(function(response){
            //        console.log(response);
            //    }, function(error){
            //        console.log(error);
            //        $http.jsonp(message.action, {params: parameterMap})
            //            .then(function(res){
            //                console.log(res);
            //            });
            //
            //    });


            $.ajax({
                'url': message.action,
                'data': parameterMap,
                'cache': true,
                'dataType': 'jsonp',
                'jsonpCallback': 'cb',
                success: callback
            });

            //$.ajax({
            //    url: message.action,
            //    data: {params: parameterMap},
            //    dataType: 'jsonp',
            //    success: function(response) {
            //        console.log(response);
            //    }
            //})

                //.success(
                //    function(response) {
                //        console.log(response);
                //    }
                //)
                //.catch(function(data, status, headers, config){
                //    console.log(data);
                //});
        }

    }
})();

从上述服务获取数据的控制器：

"use strict";
(function () {
    angular
        .module("RestApp")
        .controller("DetailController", DetailController);

    function DetailController($scope, $routeParams, YelpService){
        $scope.restId = $routeParams.restId;

        YelpService.findRestDetailsbyId(
            $scope.restId,
            function(response){
                console.log(response);
                $scope.rest = response;
                $scope.$apply();
            }
        )
    }
})();