firebaseの記憶装置からanglejsのイメージをバインドする方法

Question

Firebaseのstorage referenceからangularjsビューでイメージを表示するには？ URLをコンソールに表示できますが、ビューにアクセスすることはできません。

サービスコード

function getImageUrl(image) { 
     var url; 
     var pathReference = firebaseDataService.images.child(image); 
     return pathReference.getDownloadURL().then(function(url) { 
      return url;     
     }).catch(function(error) { 
      // Handle any errors 
     });   
    } 

コントローラコード

$scope.getImageUrl = function(image) { 
var imageUrl; 
    var imageUrl = Service.getImageUrl(image).then(function(url) { 
      imageUrl = url; 
      console.log(url); 
      return imageUrl; 
    }); 
    return imageUrl; 
} 

ビューsrc属性で{{ハッシュ}}が正しく動作しないように角度のマークアップを使用して

<div ng-repeat="category in categories"> 
    <img src="{{getImageUrl(category.image)}}"> 
</div> 

Answer 1

カテゴリを取得するまでに、カテゴリをループして各イメージを取得し、別のスコープオブジェクトに格納してビューで使用することができます。あなたのHTMLで

$scope.images = {}; 

categoriesSnapshot.forEach(function(category){ 
    Service.getImageUrl(category.val().image).then(function(url) { 
      $scope.images[category.key] = url; 
    }); 
}); 

：時刻で画像のURLを取得する必要があります

<div ng-repeat="(key, val) in categories"> 
    <img src="{{images[key]}}"> 
</div> 

Answer 2

：ブラウザは文字列{{hash}}を持つURLから{{hash}}内の式をAngularが置き換えるまでフェッチします。 ngSrc指令はこの問題を解決します。