AngularJS - 控制器在使用 $http 时不会从服务中获取数据答案

【问题标题】：AngularJS - controller doesn't get data from service when using $httpAngularJS - 控制器在使用 $http 时不会从服务中获取数据
【发布时间】：2015-05-21 09:16:11
【问题描述】：

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

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

这就是现在的样子：

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 添加解析属性的内容，但我无法解决问题！

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

谢谢

【问题讨论】：

标签： angularjs http service controller is-empty

【解决方案1】：

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

在服务中你应该直接返回对$http-Service 的调用承诺：

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

然后你必须在控制器中调用then-方法来访问服务中的数据：

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

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

【讨论】：

感谢您的建议。但是现在我每次返回 Trips 时都会加载我的数据，这使得我在编辑部分所做的任何更改都毫无用处！当我导入硬编码的数据时，我可以更改我的数据！
那么你只需要在重新加载数据之前检查你是否已经加载了数据
我试过这样的： var loaded = false; this.getTrips = function() { if(loaded == false){ return $http.get('trips.json').then(function (response) { trips = response.data; var loaded = true; return trips; }); } else { 回程；警报（“测试”）； } }; -----> 不工作！也许你有什么建议？
我更新了 Plunkr：plnkr.co/edit/QEvKMtKvhf49uIpNu5h8?p=preview 这里我缓存了服务中的数据。看看：github.com/iterativ/angularjsbestpracticesapp 以获得更大的示例
非常感谢！你让我今天一整天都感觉很好！正是我想要的;)

【解决方案2】：

如果您想在检索内容时加载视图，您确实需要路由解析。

你可以这样做。

$routeProvider
.when("/someRoute", {
    templateUrl: "sometemplat.html",
    controller: "someController",
    resolve: {
        trips: function(tripsService){
            return tripsService.getTrips();
       }
   }
})

这会将一个名为trips的变量解析到控制器中。

您需要将行程添加到您的控制器依赖项中。

如果一切正常，应该使用来自 api 的数据填充行程。

【讨论】：