AngularJS - 使用 $http 时 Controller 不从服务获取数据

Question

我有一个简单的网络应用程序，我喜欢从 json 加载一些数据。目前，数据已硬编码在我的服务中，一切正常。

当我更改我的服务以从外部 json 文件加载相同数据时， Controller 会在获取一些数据之前呈现 View 。

这就是现在的样子:

function() {
var tripsService = function() {

var trips = [{ .... SOME DATA }];

this.getTrips = function() {
            return trips;
        };

};



angular.module('customersApp').service('tripsService', tripsService);
}());

使用 $http.get :

function() {
var tripsService = function() {

 var trips = [];

this.getTrips = function() {

$http.get('trips.json').success(function (data) {
            var trips = data;
            return trips;
           });
     };

};



angular.module('customersApp').service('tripsService', tripsService);
}());

这是我的 Plunker:

plnkr

我能做些什么来改变它？我已经阅读了一些关于向我的 routeProvider 添加 resolve 属性的内容，但我无法解决问题!

更新:也许我的描述不够准确，我必须学习更多关于处理数据的知识!来自 json 的数据应该只加载一次，这样任何 View 更改都不会重新加载原始 json 文件。

谢谢

Answer 1

你必须了解 promise : http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

在服务中，您应该直接返回调用 $http-Service 的 promise :

    this.getTrips = function() {
         return $http.get('trips.json').then(function (response) {
            trips = response.data;
            return trips;
          });
    };

然后在 Controller 中，您必须调用 then 方法来访问来自服务的数据:

    function init() {
        tripsService.getTrips().then(function(trips) {
          $scope.trips = trips;
        })
    }

这里是一个更新的 Plunker 和一个工作示例: http://plnkr.co/edit/QEvKMtKvhf49uIpNu5h8?p=preview