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

正如评论中所提到的，我想问题是在您的请求完成之前调用了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
    })   
});

请注意，我没有实现上述代码，但应该为您提供大纲

使用回调函数调用Ajax服务

1 个答案: