$ getDownloadURL（）の使用方法ng-repeatで約束Angularjs 1.6

Question

私はSPAを構築していますが、Firebase（データベースとストレージ）でAngularjs 1.6を使用しています。

私はhtmlページ上にfirebase storageの画像を使用したいと思います。私はディレクティブを使用していますが、それはいくつかのページで正常に動作していますが、私はループにng-repeatを使用して動的に firebaseストレージ上に保存された画像へのリンクを貼り付ける場合は、私が問題につまずく ことを達成するために
。

約束を得るために私は$getDownloadURL()を使用していますが、しばらくしてから解決されますが、ページが既に読み込まれていて、私は崩壊してしまいます。

$getDownloadURL()の約束を変更することはできますか？

マイコード：

angular.module('module', ['firebase']).controller('someCtrl', someCtrl).directive('firebaseSrc', FirebaseStorageDirective); 

function FirebaseStorageDirective($firebaseStorage, firebase) { 
    return { 
     restrict: 'A', 
     priority: 99, 
     link: function (scope, element, attrs) { 
     attrs.$observe('firebaseSrc', function (newFirebaseSrcVal) { 
      if (newFirebaseSrcVal !== '') { 
      var storageRef = firebase.storage().ref(newFirebaseSrcVal); 
      var storage = $firebaseStorage(storageRef); 
      storage.$getDownloadURL().then(function getDownloadURL(url) { 
       element[0].src = url; 
      }); 
      } 
     }); 
     } 
    }; 
    } 
FirebaseStorageDirective.$inject = ['$firebaseStorage', 'firebase']; 

<ul> 
<li ng-repeat="item in items"> 
<img firebase-src="{{item.somePath}}" /> 
</li> 
</ul> 

Answer 1

attrs.$observeを使用する場合は、ディレクティブの属性は角式を評価する{{ }}補間を使用する必要がある：

link: function (scope, element, attrs) { 
    attrs.$observe('firebaseSrc', function (newFirebaseSrcVal) { 

<ul> 
<li ng-repeat="item in items"> 
<img firebase-src="{{item.somePath}}" /> 
</li> 
</ul> 

---

か、直接角度Exressionを評価するためにscope.$watchを使用します。

link: function (scope, element, attrs) { 
    scope.$watch(attrs.firebaseSrc, function (newFirebaseSrcVal) { 

<ul> 
<li ng-repeat="item in items"> 
<img firebase-src="item.somePath" /> 
</li> 
</ul> 

Answer 2

私は私のfirebaseDBを持っていると私はitem.path（HTMLに）それは絵へのパスですJSONファイルを取得and item.picture [0]フォルダパスの配列画像の画像の最初の名前です

私の新しいモジュール

MODULE: 
 
angular.module('myModule', ['firebase']).directive('firebaseImage', FirebaseImageDirective); 
 

 
DIRECTIVE: 
 
function FirebaseImageDirective($firebaseStorage, firebase) { 
 
    return { 
 
     restrict: 'E', 
 
     priority: 99, 
 
     scope: {}, 
 
     link: function (scope, elem, attrs) { 
 
      scope.descr = attrs['fireImageAlt']; 
 
      var myRef = attrs['fireImagePath']; 
 
      var storageRef = firebase.storage().ref(myRef); 
 
      var storage = $firebaseStorage(storageRef); 
 
      storage.$getDownloadURL().then(function getDownloadURL(url) { 
 
       scope.path = url; 
 
     }); 
 
     }, 
 
     template: "<img src='{{path}}' alt='{{descr}}'/>", 
 
     replace: true 
 
    }; 
 
    } 
 
FirebaseImageDirective.$inject = ['$firebaseStorage', 'firebase'];

<ul> 
 
    <li ng-repeat="item in data"> 
 
    <firebase-image fire-image-path="{{item.path+'/'+ item.picture[0]}}" 
 
        fire-image-alt="{{item.species + ' ' + item.name}}"> 
 
    </firebase-image> 
 
    </li> 
 
</ul>