AngularJS从服务加载数据

AngularJS Load Data from Service

本文关键字：数据 加载 服务 AngularJS      更新时间：2023-09-26

我有一个问题，从一个服务填充到我的视图中获取数据。我有一个这样定义的服务

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。从控制器获取数据填充得很好，但是，如果我尝试从服务调用数据，我将一无所获。我知道查询是异步的，但是一旦数据返回，我很难理解如何填充$scope变量。我可以使用$rootscope来广播一个事件，并在控制器中监听它，但这似乎不是正确的方法。我将非常感谢任何关于如何正确地做这件事的建议。

我想这应该能解决你的问题。

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

应该如下所示。正如NickWiggill的评论所提到的，undefined将被分配给nukeService。

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;
    });
   }

我所做的是直接从服务公开数据，并使用一个方法初始化该数据。这有什么不对吗?

服务:

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`
}

相关文章：