從Firebase + Angular.js在旋轉木馬中展示來自網址的圖片？

我正在嘗試開發一個具有圖像輪播（來自Materialize框架）的網頁，該網頁顯示從Firebase中獲取的來自網址的一系列圖片。爲了說明不同數量的圖像，我使用了Angular.js。現在我該節的HTML代碼如下所示：從Firebase + Angular.js在旋轉木馬中展示來自網址的圖片？

<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"]是圖像的URL的數組。需要注意的是，如果我在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的數組。但圖像仍然沒有顯示在旋轉木馬上。

來源

2017-08-01 Technicolor

顯示'getData'函數 –

用getData代碼更新了問題。 – Technicolor

你可以使用'var galleryImages = this.images;'。這看起來像一個範圍問題 – Milk

我使用JavaScript和各種API調用來實現自己。我發現當等待API調用的響應時，js會繼續運行代碼的其餘部分。很多時候，負責交互元素（如輪播）的js在API給出響應之前加載。

我只是使用setTimeout（function，time）函數來運行負責加載交互式內容的js代碼。我會說2000ms是一個健康的延遲。

我知道在物化過程中的傳送帶是由$('.carousel').carousel();啓動的，所以我們可以將它放在一個函數中並放在頁面的最底部，使用setTimeout（）函數在2秒後調用傳送帶。

將這個後火力點和角碼

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

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

2秒後，API調用應該已經處理，這樣的網站可以正常加載。

來源

2017-08-04 21:46:05 Shadowninjazx

從Firebase + Angular.js在旋轉木馬中展示來自網址的圖片？

回答

相關問題