因为它是异步的，$作用域在ajax调用完成之前获取数据。

你可以在你的服务中使用$q来创造承诺，并把它还给 控制器和控制器获得的结果在then()调用违背承诺。

为您服务，

app.factory('myService', function($http, $q) {
  var deffered = $q.defer();
  var data = [];  
  var myService = {};

  myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data = d;
      console.log(d);
      deffered.resolve();
    });
    return deffered.promise;
  };
  myService.data = function() { return data; };

  return myService;
});

然后，在控制器中:

app.controller('MainCtrl', function( myService,$scope) {
  myService.async().then(function() {
    $scope.data = myService.data();
  });
});

这里有一个Plunk，可以做你想要的:http://plnkr.co/edit/TTlbSv?p=preview

其思想是直接使用承诺及其“then”函数来操作和访问异步返回的响应。

app.factory('myService', function($http) {
  var myService = {
    async: function() {
      // $http returns a promise, which has a then function, which also returns a promise
      var promise = $http.get('test.json').then(function (response) {
        // The then function here is an opportunity to modify the response
        console.log(response);
        // The return value gets picked up by the then in the controller.
        return response.data;
      });
      // Return the promise to the controller
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  // Call the async method and then do stuff with what is returned inside our own then function
  myService.async().then(function(d) {
    $scope.data = d;
  });
});

这里有一个稍微复杂一点的版本，它缓存了请求，所以您只在第一次发出请求(http://plnkr.co/edit/2yH1F4IMZlMS8QsV9rHv?p=preview):

app.factory('myService', function($http) {
  var promise;
  var myService = {
    async: function() {
      if ( !promise ) {
        // $http returns a promise, which has a then function, which also returns a promise
        promise = $http.get('test.json').then(function (response) {
          // The then function here is an opportunity to modify the response
          console.log(response);
          // The return value gets picked up by the then in the controller.
          return response.data;
        });
      }
      // Return the promise to the controller
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  $scope.clearData = function() {
    $scope.data = {};
  };
  $scope.getData = function() {
    // Call the async method and then do stuff with what is returned inside our own then function
    myService.async().then(function(d) {
      $scope.data = d;
    });
  };
});

在将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工作，但希望这对你有用!

请尝试下面的代码

你可以分离控制器(PageCtrl)和服务(dataService)

'use strict'; (function () { angular.module('myApp') .controller('pageContl', ['$scope', 'dataService', PageContl]) .service('dataService', ['$q', '$http', DataService]); function DataService($q, $http){ this.$q = $q; this.$http = $http; //... blob blob } DataService.prototype = { getSearchData: function () { var deferred = this.$q.defer(); //initiating promise this.$http({ method: 'POST',//GET url: 'test.json', headers: { 'Content-Type': 'application/json' } }).then(function(result) { deferred.resolve(result.data); },function (error) { deferred.reject(error); }); return deferred.promise; }, getABCDATA: function () { } }; function PageContl($scope, dataService) { this.$scope = $scope; this.dataService = dataService; //injecting service Dependency in ctrl this.pageData = {}; //or []; } PageContl.prototype = { searchData: function () { var self = this; //we can't access 'this' of parent fn from callback or inner function, that's why assigning in temp variable this.dataService.getSearchData().then(function (data) { self.searchData = data; }); } } }());

我读过http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/ [AngularJS允许我们通过直接在作用域上放置承诺来简化我们的控制器逻辑，而不是在成功回调中手动处理已解析的值。]

如此简单和方便:)

var app = angular.module('myApp', []);
            app.factory('Data', function($http,$q) {
                return {
                    getData : function(){
                        var deferred = $q.defer();
                        var promise = $http.get('./largeLoad').success(function (response) {
                            deferred.resolve(response);
                        });
                        // Return the promise to the controller
                        return deferred.promise; 
                    }
                }
            });
            app.controller('FetchCtrl',function($scope,Data){
                $scope.items = Data.getData();
            });

希望这对你有所帮助

我也有同样的问题，但当我在互联网上冲浪时，我明白$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;
      });
 });