将数据从服务传递到控制器并在 Angular 中查看答案

【问题标题】：Passing data from service to controller & view in Angular将数据从服务传递到控制器并在 Angular 中查看
【发布时间】：2015-12-29 02:46:16
【问题描述】：

我试图在我的视图中显示restdata。我有服务叫"LocationService":

.factory('LocationService', function($resource, $http, $rootScope) {
  return {
    'getAvailableLocations': function() {
      $http.get('/api/v1/locations/available').success(function(response) {
        console.log(response); //logs proper response with json
        return response;
      });
    }
  }
});

我有一些虚拟控制器：

.controller('DummyCtrl', function($scope, $timeout, $state, $http, $stateParams, LocationService) {
  $scope.available_locations = LocationService.getAvailableLocations();
  alert($scope.available_locations); // alerts undefined
})

我确信该服务会得到正确的jsonresponse。但是，当我尝试在模板中显示它（或来自控制器的警报）时，我得到了undefined。

我该如何解决这个问题？

【问题讨论】：

阅读blog.ninja-squad.com/2015/05/28/angularjs-promises
使用 $resource 而不是 $http。 $resource 将处理承诺。请参阅stackoverflow.com/questions/31455067/… 如何在此处使用 $resource 配置工厂。

标签： rest json json angularjs model-view-controller

【解决方案1】：

您的代码应该类似于：

myApp.factory('LocationService', function($http){
    return {
        getAvailableLocations: function(){
            return $http.get('/api/v1/locations/available');
        }
    }
});

myApp.controller('DummyCtrl', function($scope, LocationService){
    LocationService.getAvailableLocations().then(function(locations){
        $scope.available_locations = locations;
    });
});

与您的代码不同的地方：

该服务现在返回一个使用来自 jsonresponse 的位置解析的承诺（在您的代码中，方法 getAvailableLocations 没有返回任何内容）。
控制器处理承诺并将结果绑定到范围上的 available_locations 属性。

【讨论】：

@JBNizet 我在下面的例子中说过;)
但是你为什么不直接使用return $http.get('/api/v1/locations/available');呢？

【解决方案2】：

那是因为方法 getAvailableLocations() 是异步的。它使用 $http.get 返回一个承诺。

你的解决方案是这样的：

'getAvailableLocations': function() {
  var promise = $http.get('/api/v1/locations/available').success(function(response) {
    console.log(response); //logs proper response with json
    return response;
  });

  return promise;
}

controller('DummyCtrl', function($scope, $timeout, $state, $http, $stateParams, LocationService) {

  function getLocations() {
    var promise = LocationService.getAvailableLocations();

    promise.then(function(response) {
      $scope.available_locations = response.data;
      alert($scope.available_locations);
    });
  }

  getLocations();
});

【讨论】：

【解决方案3】：

定位服务：

.factory('LocationService', function ($resource, $http, $rootScope) {
    return {
        'getAvailableLocations': function () {
            return $http.get('/api/v1/locations/available');
        }
    };
});

DummyCtrl：

.controller('DummyCtrl', function ($scope, $timeout, $state, $http, $stateParams, LocationService) {
    LocationService.getAvailableLocations().then(function (response) {
        $scope.available_locations = response.data;
    }, function (response) {
        console.log("Error: " + response.statusText); // If you need to show error message.
    });
});

【讨论】：