ビューに入力されたサービスからデータを取得する際に問題が発生しました。そのように定義されたサービスがあります
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を使用してイベントをブロードキャストし、コントローラーでリッスンすることはできますが、これはこれを実現する正しい方法のようには思えません。これを正しい方法で行う方法についてのアドバイスをいただければ幸いです。
これで問題は解決すると思います
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のコメントで述べたように、promiseを返さない場合、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;
});
}
私がやっていることは、サービスから直接データを公開し、このデータを初期化するメソッドを持っているということです。これの何が問題になっていますか?
サービス:
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`
}