我如何在 ng-repeat Angularjs 1.6 中使用 $getDownloadURL() 承诺

Question

我正在构建一个 SPA，我正在使用 Angularjs 1.6 和 firebase（数据库和存储）。

我想在我的 html 页面上使用来自 firebase 存储的图像。
为了实现这一点 我正在使用一个指令，它在某些页面上运行良好，但如果我使用 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时，指令属性需要使用{{ }}插值来评估Angular Expressions：

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

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

---

或使用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，我得到了 json 文件，其中 item.path（进入 html）是图片的路径，而 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>