AngularJS - контроллер не получает данные от службы при использовании $http

У меня есть простое веб-приложение, в котором мне нравится загружать некоторые данные из 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);
}());

Вот мой плункер:

plnkr

Что я могу сделать, чтобы изменить это? Я читал что-то о добавлении свойства разрешения в мой routeProvider, но не смог решить проблему!

Обновление: возможно, мое описание было недостаточно точным, и мне нужно больше узнать об обработке данных! Данные из json должны загружаться только один раз, чтобы любое изменение представления не перезагружало исходный файл json.

Спасибо


http controller angularjs service is-empty
person phil-k    schedule 21.05.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы должны узнать о обещаниях: 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;
        })
    }

Вот обновленный плункер с рабочим примером: http://plnkr.co/edit/QEvKMtKvhf49uIpNu5h8?p=preview

person DanEEStar    schedule 21.05.2015
comment
Спасибо за совет. Но теперь мои данные загружаются каждый раз, когда я возвращаюсь в «Поездки», что делает бесполезными любые изменения, которые я сделал в разделе редактирования! Поскольку я импортировал жестко закодированные данные, я мог изменить свои данные! - person phil-k; 21.05.2015
comment
Затем вам просто нужно проверить, загрузили ли вы уже данные, прежде чем перезагружать их. - person DanEEStar; 21.05.2015
comment
Я пробовал что-то вроде этого: varloaded = false; this.getTrips = function() { if(loaded == false){ return $http.get('trips.json').then(function (response) { trips = response.data; varloaded = true; return trips; }); } else { обратные рейсы; оповещение('тест'); } }; -----› не работает! Может быть, у вас есть какой-нибудь совет? - person phil-k; 21.05.2015
comment
Я обновил Plunkr: plnkr.co/edit/QEvKMtKvhf49uIpNu5h8?p=preview Здесь я кэшировать данные в сервисе. Взгляните на: github.com/iterativ/angularjsbestpracticesapp для большего примера. - person DanEEStar; 21.05.2015
comment
Большое спасибо ! Вы сделали мой день ! именно то, что я искал ;) - person phil-k; 21.05.2015

arrow_upward
0
arrow_downward

Если вы хотите загрузить представление при извлечении содержимого, вам действительно нужно разрешение маршрута.

Вы можете сделать это по.

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

Это разрешит переменную с именем trips в контроллере.

вам нужно добавить поездки в зависимости вашего контроллера.

И если все работает, то поездки должны быть заполнены данными из апи.

person Bob Thomas    schedule 21.05.2015