Paginate Demo: $scrollArray is not defined

[realph]

I'm trying to follow the paginate demo and have run into an issue where the console is returning this error:

ReferenceError: $scrollArray is not defined

My HTML and JS looks like this:

services.html

<h3>Items loaded: {{scrollItems.length}}</h3>

app.js

(function() {
  'use strict';

  var outcomesServices = require('./services/services.js');

  angular.module('outcomesApp', [
    'firebase',
    'outcomes.services'
  ])

  .constant('FBURL', 'https://newer-outcomes.firebaseio.com/');
})();

services.js

angular.module('outcomes.services', ['ngRoute'])

.controller('ServiceListController', ['$scope', 'FBURL', '$firebaseArray',
  function($scope, FBURL, $firebaseArray) {
    var ref = new Firebase(FBURL);
    var servicesRef = ref.child('services');
    $scope.scrollItems = $scrollArray(servicesRef, 'number');
}])

.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;
    console.log(list);
  }
})

Any idea what I'm doing wrong. I've never really used the .factory() provider before, so not sure if I'm doing this correctly.

Any help on this issue is appreciated. Thanks in advance!

[katowulf]

You haven't included the firebase dependency in your module definition:

angular.module('outcomes.services', ['ngRoute', 'firebase'])

Cheers, Kato

[realph]

@katowulf I've actually got an app.js file which lists outcomes.services and firebase as a dependency. That file above is just my services.js file.

app.js

angular.module('outcomesApp', [
  'firebase',
  'outcomes.services'
  ..
])

[katowulf]

If I run the code sample in your question, it will fail because $firebaseArray is not defined as a service. This is because the firebase module is not included. Until your code sample reproduces the error your want resolved, I can't help you here.

[realph]

@katowulf I've updated the original question so it includes the app.js file. This is where I'm including the firebase dependency.

[realph]

@katowulf Looks like I was missing the string version of $firebaseArray in my .factory() provider.

.factory('$scrollArray', ['$firebaseArray', function($firebaseArray) {
  return function(ref, field) {
    var scrollRef = new Firebase.util.Scroll(ref, field);
    var list = $firebaseArray(scrollRef);
    list.scroll = scrollRef.scroll;

    return list;
    console.log(list);
  }
}])

Also needed to inject '$scrollArray' as a dependency on my controller, like this:

.controller('ServiceListController', ['$scope', 'FBURL', '$firebaseArray', '$scrollArray',
  function($scope, FBURL, $firebaseArray, $scrollArray) {
    var ref = new Firebase(FBURL);
    var servicesRef = ref.child('services');
    $scope.scrollItems = $scrollArray(servicesRef, 'number');
}])

Why is this? The example doesn't inject '$scrollArray' as a dependency?

[katowulf]

I don't really know what you're saying here. You still haven't provided a minimal repro so it's really hard to look at the code fragments above and connect the dots to anything meaningful.

[realph]

@katowulf Updated my solution above. Does that make sense? And do you know why I have to inject '$scrollArray' as a dependency?

[katowulf]

You have to inject $scrollArray into your controller because it's referenced on this line:

$scope.scrollItems = $scrollArray(servicesRef, 'number');