如何使用Node.js，Angular.js和Firebase实现无限滚动？ [英] How to implement Infinite Scrolling using Node.js, Angular.js and Firebase?

问题描述

$ b 代码：

pre> <％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']）;
$ b app.controller（'ctrl'，function（$ scope，$ firebaseArray，$ timeout）{

$ scope.data = [];
var _start = 0;
var _end = 4;
var _n = 5;
$ b $ scope.getDataset = function（）{

fb.orderByChild （_n）.on（child_added，function（dataSnapshot）{

$ scope.data.push（dataSnapshot.val（' ））;
console.log（THE VALUE：+ $ scopedata）;

}）;

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

};


$ scope.getDataset（）

}）;

//编译整个< body>使用名为app的角度模块
angular.bootstrap（document.body，['app']）;


< / script>


< div class =containerMarginsIndex>

< div ng-controller =ctrl>

< div class =funng-repeat =d in data>
< h3 class =text-left> {{d.title}}< / h3>
< div class =postImgIndex>
< a href =details / {{d.id}}target =_ blank>
< img class =imgIndexng-src =/ images / uploads / {{d.image}}>
< / a>
< / div>
< div class =postScore> {{d.upvotes - d.downvotes}} HP< / div>
< / div>

< / div>

< / div>

<％include ../partials/footer％>


---

状态：

好的，我已经重写了我的Firebase数据库架构并更改了Firebase规则。

现在我确定Firebase函数返回一个值（它被记录在控制台中）。

但是我仍然得到以下错误：

这个HTML：

 < div class =funng-repeat =d in data> 
< h3 class =text-left> {{d.title}}< / h3> 
< div class =postImgIndex> 
< a href =details / {{d.id}}target =_ blank> 
< img class =imgIndexng-src =/ images / uploads / {{d.image}}> 
< / a> 
< / div> 
< div class =postScore> {{d.upvotes  -  d.downvotes}} HP< / div> 
< / div> 
  

由此取代REPRACED一次RENDERED：

 <！ -  ngRepeat：d in data  - > == 
  

我做错了什么？

解决方案

它不会显示在您的视图中，因为您在 $ scope 中没有任何内容，而且您没有使用 {{}} 来内插您的数据。请参阅以下更改：

将 data 赋值给 $ scope 要在视图中使用的变量：

  $ 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; 
  

而你的视图，使用 ngRepeat 和 {{}} 来插入：

 < div class =containerMarginsIndex > 
 
< div class =funng-repeat =d in data> 
< h3 class =text-left> {{d.title}}< / h3> 
< div class =postImgIndex> 
< a href =details / {{post.id}}target =_ blank> 
< img class =imgIndexsrc =/ images / uploads / {{post.image}}> 
< / a> 
< / div> 
< div class =postScore>（{{d.upvotes  -  d.downvotes}}）HP< / div> 
< / div> 
 
< / div> 
  

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 ?

解决方案

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>

这篇关于如何使用Node.js，Angular.js和Firebase实现无限滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！