本文介绍了如何使用Node.js，Angular.js和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>
状态：
好的，我已经重写了我的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实现无限滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-24 18:39