从服务AngularJS加载数据 [英] AngularJS Load Data from Service

问题描述

我有从填充到我的观点的服务的问题中获取数据。我已经定义了服务这样

I am having a problem getting data from a service populated into my view. I have a service defined as such

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来自控制器的数据填充正常，但是，如果我尝试从服务调用数据，我什么也没得到。据我所知，查询是异步的，但我有一个很难理解如何填充$范围的变量一旦返回的数据。我可以用$ rootscope广播一个事件，并在控制器听它，但是这似乎并不像做到这一点的正确方法。我真的AP preciate如何做到这一点的正确方法的任何建议。

If I use the $http.get from the controller the data populates fine, however, if I try to call the data from the service, I get nothing. I understand that the query is asynchronous but I am having a hard time understanding how to populate the $scope variable once the data is returned. I could use $rootscope to broadcast an event and listen for it in the controller but this does not seem like the correct way to accomplish this. I would really appreciate any advice on how to do this the correct way.

推荐答案

我想这应该解决您的问题。

I think this should solve your problem

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`

}

这是对象引用的一个问题。

This is a problem with object reference.

在调用 nukeService.getNukes（）你得到一个参照对象 A 那么你的变量 $ scope.nukes 是指该内存位置。

when you calls nukeService.getNukes() you are getting a reference to a object a then your variable $scope.nukes refers that memory location.

当您设置远程服务器调用后 nukeService.nukes =数据; 你是不是改变对象 A 而是要更改 nukeService.nukes 引用从对象 A 反对 b 。但是，你的 $ scope.nukes 不知道这个重新分配，它仍然指向对象 A 。

After the remote server call when you set nukeService.nukes = data; you are not changing the object a instead you are changing nukeService.nukes from referencing object a to object b. But your $scope.nukes does not know about this reassignment and it still points to object a.

我在这种情况下的解决方案是通过一个对象 A 财产数据，然后只更改数据属性而不是改变参照 A

My solution in this case is to pass a object a with property data and then only change the data property instead of changing reference to a

这篇关于从服务AngularJS加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！