サービスからのAngularJSデータのロード

Question

サービスからデータを取得しているときに、自分のビューにデータが取り込まれています。私は、このサービスは、このような

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

と私のコントローラのように定義している私は、コントローラから$ http.getを使用している場合、私はからデータを呼び出すようにしようとした場合のデータは、しかし、細かい移入

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



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

    $scope.nukes = nukeService.getNukes(); 

} 

サービス、私は何も得ない。私はクエリが非同期であることを理解していますが、データが返されると$ scope変数に値を設定する方法を理解するのは苦労しています。私は$ rootscopeを使ってイベントを放送し、コントローラでそれを聞くことができますが、これは正しい方法ではありません。私は本当にこれを正しい方法で行うためのアドバイスを感謝します。

Answer 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はそのメモリの場所を参照します。リモート・サーバ・コールの後

あなたがbをオブジェクトへのオブジェクトaを参照してからaではなく、あなたがnukeService.nukes変更されているオブジェクトを変更していないnukeService.nukes = data;を設定します。しかし、あなたの$scope.nukesはこの再割り当てについて知らず、依然としてオブジェクトaを指しています。この場合

私の解決策は、プロパティdata持つオブジェクトaを通過した後にのみa

Answer 2

次のようにこれがなければならない代わりに変化基準のデータプロパティを変更することです。 NickWiggillのコメントで述べたように、私たちが約束を返さない場合、未定義は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; 
    }); 

    } 

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