使用回调函数调用 Ajax 服务

Question

我正在尝试使用 ajax 调用 Web 服务，然后将结果传递给角度控制器。我无法从回调函数中获取值以传递给范围变量。我认为这只是我对回调函数如何工作的理解不好。

代码如下：

function ajaxKimono(callback) {

    $.ajax({
          url:"https://www.kimonolabs.com/api/cveeggn4?apikey=NWYzkeJpFDtb4aOYd6yD96L5PdLuZHjo",
          crossDomain: true,
          dataType: "jsonp",
          success: callback,
          error: function (xhr, status) {
            //handle errors
            console.log(xhr);
            console.log(status);
          }
        });

};

angular.module('app').controller('gifCtrl', function(){
    var self = this;
    var gifs = [];

    ajaxKimono(function(result){
        var collection = result.results.collection1;

        $.each(collection, function(i, item){
            gifs.push({ gif: item.property5.href});
        });

        //this outputs the correct data
        //so i know the ajax call is working correctly
        console.log(gifs);

        self.gifCollection = gifs;

    });

    //something about the scope is messing me up
    //this outputs nothing...
    console.log(self.gifCollection);

});

Answer 1

正如 cmets 中提到的，我想问题是您的 console.log 在您的请求完成之前被调用。

将您的 http 请求放在单独的工厂或服务中。这使得测试和重用变得更容易。请注意使用 Angular 的 $http 快捷方法返回 promise：

app.factory('DataService', function($http) {
  var getValues= function() {
    return $http.jsonp("/api/...") // returns a promise
  };

  return {
    getValues: getValues
  }
});

然后在你的控制器中：

myApp.controller('MyController', function ($scope, DataService) {     
    DataService.getValues().then(
    function(){
      // successcallback
    },
    function(){
      // errorcallback
    })   
});

注意上面的代码我没有实现，但是应该给你提供一个大纲