Passing data from service to controller & view in Angular

I am trying to display restdata in my view. I have service called "LocationService":

我想在我的视图中显示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;
      });
    }
  }
});

And I have some dummy controller:

我有一些虚拟控制器：

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

I am sure that service gets a proper jsonresponse. However, when I am trying to display it in template (or alert from controller) I got undefined.

我确信该服务获得了正确的jsonresponse。但是，当我试图在模板中显示它（或从控制器发出警报）时，我得到了未定义。

How can I solve this?

我怎么解决这个问题？

3 个解决方案

#1

Your code should look something like:

您的代码应该类似于：

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;
    });
});

Things that are different from your code:

与您的代码不同的东西：

the service now returns a promise that resolved with the location from the jsonresponse (in your code the method getAvailableLocations returned nothing).

该服务现在返回一个使用jsonresponse中的位置解析的promise（在您的代码中，getAvailableLocations方法没有返回任何内容）。
the controller handles the promise and binds the result to the available_locations property on the scope.

控制器处理promise并将结果绑定到作用域上的available_locations属性。

#2

That's because method getAvailableLocations() is async. It uses $http.get which returns a promise.

那是因为方法getAvailableLocations（）是异步的。它使用$ http.get返回一个promise。

Your solution is this:

你的解决方案是：

'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

LocationService:

定位服务：

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

DummyCtrl:

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.
    });
});

#1