如何使用Node.js、Angular.js和Firebase实现无限滚动？
更新8:
代码：
<% 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 %>形势：
好的，我已经修改了我的Firebase数据库体系结构，并更改了Firebase规则。
我现在确定Firebase函数返回一个值(它被记录在控制台中)。
但我仍然得到以下错误：
这个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>被呈现的以下内容所替换：
<!-- ngRepeat: d in data --> == $0我做错了什么？
回答 3
Stack Overflow用户
发布于 2016-11-16 14:15:36
它没有显示在您的视图中，因为您在$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="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>Stack Overflow用户
发布于 2016-11-15 22:29:47
您需要包含$scope.$apply()，因为滚动事件在角的上下文之外执行。
此外，事件侦听器应该在控制器内，以便可以访问范围内的more函数。
这里有一个最新的小提琴：
https://jsfiddle.net/xue8odfc/2/
我想说的是，由于您所引用的库之间的不兼容，libraries没有解决{{post.image}}等问题。我建议使用工作中的jsfiddle版本进行测试：
<script src="https://cdn.firebase.com/js/client/2.0.3/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/firebase-util/0.2.5/firebase-util.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.4/angularfire.min.js"></script>Stack Overflow用户
发布于 2016-11-15 22:44:41
在控制器中添加滚动监听器。函数more确实不存在，但是您确实有一个$scope.more方法。
app.controller('ctrl', function ($scope, $firebaseArray, $timeout) {
// ORDERED BY TIME:
var ref = firebase.database().ref("posts/fun");
var scrollRef = new Firebase.util.Scroll(ref, "time");
$scope.posts = $firebaseArray(scrollRef);
scrollRef.scroll.next(5);
// AS DATA APPEARS IN DATABASE ORDERED BY TIME:
ref.once('value', function(snap) {
$scope.rawdata = snap.val();
$scope.$apply();
});
$scope.more = function() {
scrollRef.scroll.next(5);
};
// Add scroll listener
window.addEventListener('scroll', function() {
if (window.scrollY === document.body.scrollHeight - window.innerHeight) {
$scope.$apply($scope.more);
}
});
});请注意，我正在$scope.$apply中调用$scope.$apply，以便在调用结束时解析范围。实际上，窗口滚动事件上的JS侦听器已经脱离了角度生命周期，因此我们需要手动$digest范围，以便更新其所有观察者并更新HTML。如果你想了解更多关于$scope.$apply的信息，可以在线搜索它。
关于你的第一个问题
您的角应用程序没有启动，因为角从来没有初始化。为此，您需要同步加载它并使用ng-app指令，或者如果您不想用代码更改任何内容，只需在模块和控制器定义之后添加以下行：
// Compile the whole <body> with the angular module named "app"
angular.bootstrap(document.body, ['app']);https://stackoverflow.com/questions/40565419
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号