Question

我试图写一个Angular服务，似乎有些东西丢失了。我的问题是它没有向Angular控制器返回任何值

getPrepTimes()方法未返回http数据

但是当我检查网络时（通过Chrome开发工具），它会正确调用外部api并返回一个json对象作为响应

#my service
'use strict';
angular.module('recipeapp')
  .service('prepTimeService',['$http', function($http){
      this.prepTime = getPrepTimes();

      function getPrepTimes(){
          $http({
            url: '/prep_times/index.json',
            method: 'GET'
          })
          .success(function (data, status, header, config){
            return data;
          });
      };
  }
  ]);




#controller
'use strict';

angular.module('recipeapp')
  .controller('recipeCtrl', ['$scope', 'prepTimeService', function($scope, prepTimeService){
     $scope.prep_time = prepTimeService.prepTime;
  }]);

当我检查方法getPrepTimes()并返回一个字符串时，它可以工作。这里可能缺少什么？

Answer 1

以上几点都有问题。您将this.prepTime分配给getPrepTimes()。 ()会立即调用getPrepTimes，而不会在您实际调用它时调用angular.module('recipeapp').service('prepTimeService',['$http', function($http){ this.prepTime = getPrepTimes; function getPrepTimes(callback) { $http({ url: '/prep_times/index.json', method: 'GET' }).success(function (data, status, header, config){ callback(data); }); }; }]);！您还需要利用回调来恢复数据并使用它：

 prepTimeService.prepTime(function(data) {
     $scope.prep_time = data;
 });

现在就这样使用它：

{{1}}

Answer 2

对$http服务的调用是异步的，这意味着您需要返回一个承诺（而不是一个值）：

this.prepTime = function() {
    return $http({
      url: '/prep_times/index.json',
      method: 'GET'
    });          
};

在控制器上：

angular.module('recipeapp')
  .controller('recipeCtrl', ['$scope', 'prepTimeService', function($scope, prepTimeService){
    $scope.prep_time = prepTimeService.prepTime()
      .success(function (data, status, header, config){
        $scope.someVar = data;
      });
}]);

Answer 3

承诺回答：

var self = this;

var deferred = $q.defer();

self.getPrepTimes = function() {
        $http({
            url: '/prep_times/index.json',
            method: 'GET'
        })
                .success(function(data, status, headers, config) {

                    if (data.error === undefined) {
                        deferred.resolve(data);
                    } else {
                        if (data.error !== undefined) {

                        } else {
                            deferred.reject(data);
                        }
                    }

                }).error(function(data, status, headers, config) {
            deferred.reject(data);
        });
        return deferred.promise;
    };

在控制器中调用它：

 prepTimeService.getPrepTimes().then(function(result) {
     $scope.prep_time = result;
    },
    function(error) { 
     // show alert           
   });

AngularJS：服务没有返回值

3 个答案: