我最近发布了一篇关于我在SO面临的问题的详细描述。由于我无法发送一个实际的$http请求,所以我使用timeout来模拟异步行为。在@Gloopy的帮助下,从我的模型到视图的数据绑定工作正常

现在,当我使用$http而不是$timeout(在本地测试)时,我可以看到异步请求是成功的,数据在我的服务中被json响应填充。但是,我的观点并没有更新。

在这里更新Plunkr


当前回答

简单点。这很简单

在您服务期间退货承诺(在您服务期间无需使用) 在你的控制器中使用then

演示。http://plnkr.co/edit/cbdG5p?p=preview

var app = angular.module('plunker', []);

app.factory('myService', function($http) {
  return {
    async: function() {
      return $http.get('test.json');  //1. this returns promise
    }
  };
});

app.controller('MainCtrl', function( myService,$scope) {
  myService.async().then(function(d) { //2. so you can use .then()
    $scope.data = d;
  });
});

其他回答

我认为更好的方式是这样的:

服务:

app.service('FruitsManager',function($q){

    function getAllFruits(){
        var deferred = $q.defer();

        ...

        // somewhere here use: deferred.resolve(awesomeFruits);

        ...

        return deferred.promise;
    }

    return{
        getAllFruits:getAllFruits
    }

});

在控制器中,你可以简单地使用:

$scope.fruits = FruitsManager.getAllFruits();

Angular会自动把解析后的awesomfruits放到$scope.fruits中。

我也有同样的问题,但当我在互联网上冲浪时,我明白$http返回默认的承诺,然后我可以在返回“数据”后使用“然后”。看看代码:

 app.service('myService', function($http) {
       this.getData = function(){
         var myResponseData = $http.get('test.json').then(function (response) {
            console.log(response);.
            return response.data;
          });
         return myResponseData;

       }
});    
 app.controller('MainCtrl', function( myService, $scope) {
      // Call the getData and set the response "data" in your scope.  
      myService.getData.then(function(myReponseData) {
        $scope.data = myReponseData;
      });
 });

简单点。这很简单

在您服务期间退货承诺(在您服务期间无需使用) 在你的控制器中使用then

演示。http://plnkr.co/edit/cbdG5p?p=preview

var app = angular.module('plunker', []);

app.factory('myService', function($http) {
  return {
    async: function() {
      return $http.get('test.json');  //1. this returns promise
    }
  };
});

app.controller('MainCtrl', function( myService,$scope) {
  myService.async().then(function(d) { //2. so you can use .then()
    $scope.data = d;
  });
});

与此相关,我也遇到过类似的问题,但不是用Angular的get或post,而是用第三方的扩展(在我的例子中是Chrome extension)。 我面临的问题是,Chrome扩展不会返回然后(),所以我无法做到上面的解决方案,但结果仍然是异步的。 因此,我的解决方案是创建一个服务,然后进行回调

app.service('cookieInfoService', function() {
    this.getInfo = function(callback) {
        var model = {};
        chrome.cookies.get({url:serverUrl, name:'userId'}, function (response) {
            model.response= response;
            callback(model);
        });
    };
});

然后在控制器中

app.controller("MyCtrl", function ($scope, cookieInfoService) {
    cookieInfoService.getInfo(function (info) {
        console.log(info);
    });
});

希望这篇文章可以帮助其他有同样问题的人。

在将UI绑定到数组时,您需要确保通过将长度设置为0并将数据推入数组来直接更新相同的数组。

而不是这个(设置一个不同的数组引用数据,你的UI不会知道):

 myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data = d;
    });
  };

试试这个:

 myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data.length = 0;
      for(var i = 0; i < d.length; i++){
        data.push(d[i]);
      }
    });
  };

下面是一个演示,显示了设置一个新数组与清空和添加到现有数组之间的区别。我不能让你的plnkr工作,但希望这对你有用!