tahoeRobbo · August 29, 2015 14:24 · Mar 23, 2015 · Mar 23, 2015 · Mar 23, 2015
diff --git a/app.js b/app.js
@@ -7,13 +7,18 @@ app.controller('ctrl', function($scope) {
 
 app.factory('$scrollArray', function($firebaseArray) {
   return function(ref, field) {
+    // create a special scroll ref
     var scrollRef = new Firebase.util.Scroll(ref, field);
+    // generate a synchronized array with the ref
     var list = $firebaseArray(scrollRef);
+    // store the scroll namespace on the array for easy ref
     list.scroll = scrollRef.scroll;
+
     return list;
   }
 });
 
+// just some scroll magic to show the bottom of the list as new records are loaded
 app.directive('scrollToBottom', function () {
   var unbind;
   return {

diff --git a/app.js b/app.js
@@ -25,8 +25,7 @@ app.directive('scrollToBottom', function () {
         // assumes we have jQuery, which handles the pretty animation
         // otherwise, just use this code instead:
         // element[0].scrollTop = element[0].scrollHeight;
-        var $e = $(element);
-        $e.animate({scrollTop: element[0].scrollHeight});
+        $(element).animate({scrollTop: element[0].scrollHeight});
       });
     }
   }

diff --git a/app.js b/app.js
@@ -0,0 +1,33 @@
+var app = angular.module('app', ['firebase']);
+
+app.controller('ctrl', function($scope) {
+  var ref = new Firebase('https://fbutil.firebaseio.com/paginate');
+  $scope.scrollItems = $scrollArray(ref, 'number');
+});
+
+app.factory('$scrollArray', function($firebaseArray) {
+  return function(ref, field) {
+    var scrollRef = new Firebase.util.Scroll(ref, field);
+    var list = $firebaseArray(scrollRef);
+    list.scroll = scrollRef.scroll;
+    return list;
+  }
+});
+
+app.directive('scrollToBottom', function () {
+  var unbind;
+  return {
+    restrict: 'A',
+    scope: { scrollToBottom: "=" },
+    link: function (scope, element) {
+      if( unbind ) { unbind(); }
+      unbind = scope.$watchCollection('scrollToBottom', function () {
+        // assumes we have jQuery, which handles the pretty animation
+        // otherwise, just use this code instead:
+        // element[0].scrollTop = element[0].scrollHeight;
+        var $e = $(element);
+        $e.animate({scrollTop: element[0].scrollHeight});
+      });
+    }
+  }
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<body ng-app="app" ng-controller="ctrl">
+
+  <h4>Items loaded: {{scrollItems.length}}</h4>
+
+  <p>
+      <button class="btn btn-primary"
+          ng-click="scrollItems.scroll.next(25)"
+          ng-disabled="!scrollItems.scroll.hasNext()">
+          Load Next 25
+      </button>
+  </p>
+
+  <ul class="scrollbox" scroll-to-bottom="scrollItems">
+      <li ng-repeat="item in scrollItems">{{item.$id}}: {{item.string}}</li>
+  </ul>
+
+</body>