在来自 Firebase + Angular.js 的轮播中显示来自 url 的图像？

Question

我正在尝试开发一个具有图像轮播（来自 Materialise 框架）的网页，该轮播显示从 Firebase 获取的 url 中的一系列图像。为了说明我使用的图像数量不同 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"] 是一组图片网址。需要注意的是，如果我在 var galleryImages = this 之后插入像 galleryImages.images = ["some image url here"] 这样的行，那么它实际上会显示该图像。但是，如果我将相同的行放在 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 的值，这是一个 url 数组。但是图像仍然没有显示在轮播中。

Answer 1

我通过 JavaScript 和各种 API 调用来实现自己。我发现在等待来自 API 调用的响应时，js 继续执行并且运行s 仍然是其余代码。通常，负责轮播等交互元素的 js 在 API 给出响应之前加载。

我只是简单地使用setTimeout(function, time) 函数来运行负责延迟加载交互内容的js 代码。我会说 2000 毫秒是一个健康的延迟。

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

将其放在 firebase 和 angular 代码之后

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

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

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

在来自 Firebase + Angular.js 的轮播中显示来自 url 的图像？

Display images from urls in a carousel from Firebase + Angular.js?

html

javascript

angularjs

angularfire

firebase-realtime-database