如何使用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函数返回一个值（它被logging在控制台中）。
但是我仍然得到以下错误：
这个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>
由此得到REPLACED一次RENDERED：
<!-- ngRepeat: d in data --> == $0
我做错了什么？
它不会在您的视图中显示，因为您在$scope没有任何内容，并且您没有使用{{}}来插入数据。 请参阅以下更改：
将data分配给要在视图中使用的$scopevariables：
$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>
在您的控制器中添加滚动监听器。 这个函数确实不存在，但是你有一个$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.more $scope.$apply以便在调用结束时消解范围。 事实上，一个窗口滚动事件的JS监听器不在Angular生命周期中，所以我们需要手动$digest Angular的作用域来更新所有监视器并更新HTML。 在线search$scope.$apply如果您想了解更多信息。
关于你的第一个问题
您的angular度应用程序未启动，因为angular度从未初始化。 为此，您需要同步加载并使用ng-app指令，或者如果您不想用代码更改任何内容，则可以简单地在模块和控制器定义之后添加这些行：
// Compile the whole <body> with the angular module named "app" angular.bootstrap(document.body, ['app']);
您需要包含$scope.$apply()因为滚动事件在Angular的上下文之外执行。
此外，事件监听器应该位于控制器内部，以便可以访问范围morefunction。
这是一个更新的小提琴：
https://jsfiddle.net/xue8odfc/2/
我会说Angular的问题不解决{{post.image}}等是由于您所引用的库之间的不兼容性。 我build议使用工作jsfiddle的版本进行testing：
<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>