如何使用Node.js, Angular.js和Firebase实现无限滚动

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

本文关键字：js 实现 Firebase 无限 滚动 Angular 何使用 Node      更新时间：2023-09-26

UPDATE 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

我做错了什么?

它没有显示在您的视图中，因为您在$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>

在控制器中添加滚动监听器。函数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.more，以便在调用结束时对范围进行消化。实际上，窗口滚动事件的JS监听器已经不在Angular的生命周期中了，所以我们需要手动设置$digest作用域，以便Angular更新所有的监听器和HTML。如果你想了解更多关于$scope.$apply的信息，请在网上搜索。

关于你的第一个问题

你的angular应用没有启动，因为angular从未初始化过。为此，您需要同步加载它并使用ng-app指令，或者如果您不想更改代码中的任何内容，您可以简单地在模块和控制器定义之后添加这些行:

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

你需要包含$scope.$apply()，因为滚动事件在Angular的上下文中执行。

事件监听器也应该在控制器内部，以便more函数的作用域是可访问的。

这是一个更新的小提琴:

https://jsfiddle.net/xue8odfc/2/

我想说Angular没有解决{{post.image}}等问题是由于你引用的库之间的不兼容。我建议使用工作目录中的版本进行测试:

<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>
相关文章：