AngularJS Загрузка данных из службы

У меня возникла проблема с получением данных из службы, заполненной в моем представлении. У меня есть служба, определенная как таковая

app.factory('nukeService', function($rootScope, $http) {
    var nukeService = {};

    nukeService.nuke = {};

    //Gets the list of nuclear weapons
    nukeService.getNukes = function() {
        $http.get('nukes/nukes.json')
            .success(function(data) {
                nukeService.nukes = data;
            });

        return nukeService.nukes;
    };

    return nukeService;
});

и мой контроллер

function NavigationCtrl($scope, $http, nukeService){



    /*$http.get('nukes/nukes.json').success(function(data) {
        $scope.nukes = data;
    });*/

    $scope.nukes = nukeService.getNukes();

}

Если я использую $http.get из контроллера, данные заполняются штрафом, однако, если я попытаюсь вызвать данные из службы, я ничего не получаю. Я понимаю, что запрос является асинхронным, но мне трудно понять, как заполнить переменную $scope после возвращения данных. Я мог бы использовать $rootscope для трансляции события и прослушивания его в контроллере, но это не похоже на правильный способ выполнить это. Я был бы очень признателен за любые советы о том, как это сделать правильно.

Ответ 1

Я думаю, что это должно решить вашу проблему.

app.factory('nukeService', function($rootScope, $http) {
    var nukeService = {};

    nukeService.data = {};

    //Gets the list of nuclear weapons
    nukeService.getNukes = function() {
        $http.get('nukes/nukes.json')
            .success(function(data) {
                nukeService.data.nukes = data;
            });

        return nukeService.data;
    };

    return nukeService;
});

function NavigationCtrl($scope, $http, nukeService){

    $scope.data = nukeService.getNukes();

    //then refer to nukes list as `data.nukes`

}

Это проблема с ссылкой на объект.

когда вы вызываете nukeService.getNukes(), вы получаете ссылку на объект a, тогда ваша переменная $scope.nukes ссылается на эту ячейку памяти.

После вызова удаленного сервера при установке nukeService.nukes = data; вы не меняете объект a, вместо этого вы меняете nukeService.nukes на ссылку объекта a на объект b. Но ваш $scope.nukes не знает об этом переназначении и указывает на объект a.

Мое решение в этом случае - передать объект a с свойством data, а затем изменить свойство данных вместо изменения ссылки на a

Ответ 2

Это должно быть следующим. Как упоминалось в комментарии NickWiggill, undefined будет присвоен nukeService.data, если мы не вернем обещание.

app.factory('nukeService', function($rootScope, $http) {
    var nukeService = {};
    //Gets the list of nuclear weapons
    nukeService.getNukes = function() {
       return $http.get('nukes/nukes.json');
    };

    return nukeService;
});


  function NavigationCtrl($scope, $http, nukeService){
     nukeService.getNukes().then(function(response){

        $scope.data = response.data;
    });

   }

Ответ 3

Что я делаю, так это то, что я предоставляю данные прямо из службы и имею метод, который инициализирует эти данные. Что не так с этим?

Услуги:

app.factory('nukeService', function($scope, $http) {
    var data = {};
    data.nukes = [];

    //Gets the list of nuclear weapons
    var getNukes = function() {
        $http.get('nukes/nukes.json').success(function(data) {
                data.nukes = data;
        });
    };

    // Fill the list with actual nukes, async why not.
    getNukes();

    return {
        data : data
        // expose more functions or data if you want
    };
});

Контроллер:

function NavigationCtrl($scope, nukeService){
     $scope.data = nukeService.data;
     //then refer to nukes list as `$scope.data.nukes`
}