Question

我正在尝试开发一个网页，其中包含一个图片轮播（来自Materialise框架），该网页显示从Firebase获取的网址中的一系列图片。考虑到我使用Angular.js的不同数量的图像。现在我对该部分的HTML代码如下所示：

<div ng-app="myApp">
    <div ng-controller="GalleryController as galleryImages">
        <div class="carousel carousel-slider grey" data-indicators="true">
            <div ng-repeat="image in galleryImages.images">
              <a class="carousel-item"><img ng-src="{{image}}"></a>
            </div>
        </div>
    </div>
</div>

我的JavaScript看起来像这样：

var app = angular.module('myApp', []);
app.controller('GalleryController', ['$scope', function($scope) {
    var galleryImages = this;

    getData(function(data) {
        galleryImages.images = data["gallery"];
        $scope.$apply();
    });
}]);

function getData(completion) {
  var database = firebase.database();
  var ref = database.ref('nodes/myNode');
  ref.once('value', function(snapshot) {
    completion(snapshot.val());
  });
}

其中data["gallery"]是图片网址数组。需要注意的是，如果我在galleryImages.images = ["some image url here"]之后插入var galleryImages = this之类的行，那么它实际上会显示该图像。但如果我在getData内放置相同的行，那么它就不起作用。

我错过了什么？

编辑尝试使用AngularFire。还没有成功。这是我的新代码：

<div ng-app="myApp">
    <div ng-controller="GalleryController">
        <div class="carousel carousel-slider grey" data-indicators="true">
            <div ng-repeat="image in object.gallery">
                <a class="carousel-item" href="#one"><img ng-src="{{image}}"></a>
            </div>
        </div>
    </div>
</div>

在Javascript端：

var app = angular.module('myApp', ['firebase']);
app.controller('GalleryController', ['$scope', '$firebaseObject', function($scope, $firebaseObject) {
    var data = $firebaseObject(firebase.database().ref('nodes/myNode'));
    data.$loaded().then(function() {
        $scope.data = data;

        var object = {};
        angular.forEach($scope.data, function(value, key) { object[key] = value; });

        $scope.object = object;
   });
}]);

打印出object表示它实际上有一个值gallery的值，这是一个网址数组。但是这些图像仍未显示在旋转木马中。

Answer 1

我自己使用JavaScript和各种API调用实现。我发现在等待来自API调用的响应时，js继续前进并运行其余的代码。通常，在API给出响应之前，负责交互式元素（如轮播）的js会加载。

我只是使用setTimeout（函数，时间）函数来运行负责加载交互式内容的js代码。我会说2000ms是一个健康的延迟。

我知道物化中的轮播是用$('.carousel').carousel();启动的，所以我们可以把它放在一个函数中，在页面的最底部，使用setTimeout（）函数在2秒后调用轮播。

将此文件放在firebase和angular code

之后

$(document).ready(function(){
      setTimeout(initiateSlider, 2000)
});

function initiateSlider() {
  $('.carousel').carousel();
}

2秒后，应该已经处理了API调用，以便网站可以正常加载。

在Firebase + Angular.js的旋转木马中显示来自网址的图片？

1 个答案: