Firebaseデータの参照に基づいてFirebase Storageからイメージファイルをダウンロードする方法

Question

私はこの問題で数日間苦労しています。 WebアプリケーションでFirebase Storageを使用しようとしていますが、「アップロード」の部分は正常に動作していますが、好きですが、「ダウンロード」の部分が私を夢中にしています。

var refspaedtServ = new Firebase(FBURLSPA + $routeParams.id); 
$scope.spaedServ = $firebaseObject(refspaedtServ); 

私はID以内に私のレコードを取得しています：私は私のFirebase（データ）の参照を持っている

まず： はここに私のコードです。 第二に、私は私のオブジェクトフィールド呼び出し「写真」を取得、私はだからここに私は写真の名前を取得

var lafoto = ''; 
refspaedtServ.on("value", function(rootSnapshot) { 
    lafoto = rootSnapshot.val().foto; 
    console.log("Inside image ", lafoto) 
}); 

をダウンロードしたり、表示したい写真の名前です。 これは非同期通信であるので、私は値を取得することができませんでしたので、私はタイムアウト機能を挿入：のsetTime関数内だからここ

setTimeout(function(){ 
    console.log("outside ", lafoto); 
    $scope.lafoto = lafoto 
}, 1000); 

を、「lafoto」値はOKです。 その後、私は私のFirebaseストレージバケツのrefrenceを得る：ここで

var storageRef = firebase.storage().ref(); 
var starsRef = storageRef.child('fotos' + lafoto); 

は私の「問題は、」私はイメージをダウンロードしようとしたとき、「lafoto」の値がなくなって、URLが構築し、することができ、来ますなし（一部）のsetTimeout（関数）内部ストレージの参照とstarsRef.getDownloadURLを残して、私は写真私はすでにテストを行った

starsRef.getDownloadURL().then(function(url) { 
    console.log("la url ", url) ; 
    $scope.url = url; 
}).catch(function(error) { 
    switch (error.code) { 
    case 'storage/object_not_found'; 
}); 

を表示したい私のWebページのイメージコンテナ、に結合し、それが動作され、私のURLは正しく作成されますが、私のWebページにはバインドされません。 私がconsole.logを見ると、私のURLはOKで、クリックすると写真が表示されます。

お願いします。

敬具、あなたは非同期を有することに起因する可能性が$scopeへの参照を失うされているように思え

Answer 1

は、コントローラの外に呼び出して

ビクター（それはあなたのコード全体を見ずに言うのは難しいです）。

まず、refspaedtServ.on()の後にsetTimeout()の代わりにrefspaedtServ.once()を使用して、約束を返し、残りのロジックを約束の中に移すべきです。次に、$scopeの内部に約束を設定する必要があります。約束はテンプレートで使用することができますthis articleが表示されます。例えば、このようなものが動作するはずです：

myModule.controller('HelloCtrl', function($scope) { 
    var refspaedtServ = new Firebase(FBURLSPA + $routeParams.id); 
    $scope.spaedServ = $firebaseObject(refspaedtServ); 
    $scope.url = refspaedtServ.once("value").then(function(rootSnapshot) { 
    var lafoto = rootSnapshot.val().foto; 
    console.log("Inside image ", lafoto) 
    var starsRef = firebase.storage().ref('fotos' + lafoto); 
    return starsRef.getDownloadURL().then(function(url) { 
     console.log("la url ", url) ; 
     return url; 
    }).catch(function(error) { 
     switch (error.code) { 
     case 'storage/object_not_found'; 
     } 
    }); 
    }); 
}) 

今$scope.urlは、（約束は他の約束を返すことでパイプすることができるので）、最後に直接urlを返す約束を割り当てられ、テンプレートが実際に約束をサポートしています。

問題とは関係ありません：ストレージURIの代わりに、画像のURLを直接データベースに保存することをお勧めします。このURLは変更しないでください。これを行うと、画像を表示するたびに追加のリクエストが保存されます。たとえば、このURLをfotoUrl属性に保存した場合は、次のようにしてください。

myModule.controller('HelloCtrl', function($scope) { 
    var refspaedtServ = new Firebase(FBURLSPA + $routeParams.id); 
    $scope.spaedServ = $firebaseObject(refspaedtServ); 
    $scope.url = refspaedtServ.once("value").then(function(snapshot) { 
    return snapshot.val().fotoUrl; 
    }); 
})