Coder1000 Coder1000 - 19 days ago 14
AngularJS Question

How to implement Infinite Scrolling using Node.js, Angular.js and Firebase?

UPDATE 8:

CODE:

<% include ../partials/header %>


<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/firebase-util/0.2.5/firebase-util.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.4/angularfire.min.js"></script>

<script>


var config = {
info
};

firebase.initializeApp(config);

var fb = firebase.database().ref("posts/fun");

var app = angular.module('app', ['firebase']);

app.controller('ctrl', function ($scope, $firebaseArray, $timeout) {

$scope.data = [];
var _start = 0;
var _end = 4;
var _n = 5;

$scope.getDataset = function() {

fb.orderByChild('id').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) {

$scope.data.push(dataSnapshot.val());
console.log("THE VALUE:"+$scope.data);

});

_start = _start + _n;
_end = _end + _n;

};


$scope.getDataset()

});

// Compile the whole <body> with the angular module named "app"
angular.bootstrap(document.body, ['app']);


</script>


<div class ="containerMarginsIndex">

<div ng-controller="ctrl">

<div class="fun" ng-repeat="d in data">
<h3 class="text-left">{{d.title}}</h3>
<div class = "postImgIndex">
<a href="details/{{d.id}}" target="_blank">
<img class= "imgIndex" ng-src="/images/uploads/{{d.image}}" >
</a>
</div>
<div class="postScore">{{d.upvotes - d.downvotes}} HP</div>
</div>

</div>

</div>

<% include ../partials/footer %>





SITUATION:

Ok, I have reworked my Firebase database architecture and changed the Firebase rules.

I am now certain the Firebase function returns a value (it is logged in the console).

But I still get the following error:

This HTML:

<div class="fun" ng-repeat="d in data">
<h3 class="text-left">{{d.title}}</h3>
<div class = "postImgIndex">
<a href="details/{{d.id}}" target="_blank">
<img class= "imgIndex" ng-src="/images/uploads/{{d.image}}" >
</a>
</div>
<div class="postScore">{{d.upvotes - d.downvotes}} HP</div>
</div>


gets REPLACED by this once RENDERED:

<!-- ngRepeat: d in data --> == $0


What have I done wrong ?

Answer

It's not displaying in your view because you have nothing on the $scope and you're not using {{}} to interpolate your data. See the following changes:

Assign data to a $scope variable to be used in the view:

$scope.data = [];
var _start = 0;
var _end = 4;
var _n = 5;
var getDataset = function() {
  fb.orderByChild('time').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) {
  $scope.data.push(dataSnapshot.val());
});

_start = _start + _n;
_end = _end + _n;

And your view, use ngRepeat and {{}} to interpolate:

<div class ="containerMarginsIndex">

          <div class="fun" ng-repeat="d in data">
            <h3 class="text-left">{{d.title}}</h3>
            <div class = "postImgIndex">
            <a href="details/{{post.id}}" target="_blank">
                <img class= "imgIndex" src="/images/uploads/{{post.image}}" >
            </a>
            </div> 
            <div class="postScore">({{d.upvotes - d.downvotes}}) HP</div>
        </div>

</div>
Comments