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直接评估Angular Exression：

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>

如何使用$ getDownloadURL（）保证使用ng-repeat Angularjs 1.6

2 个答案: