I have a rails 4 application using AngularJS. I am attempting to create a prototype using the ui.scroll directive from angular's ui-utils modules. My rails API is working great when I use ng-repeat, but when I try using ng-scroll, my viewport never has any data. NOTE: I am using jquery in other parts of the app, so I'm not using any jqlite stuff.
View: (I'm skipping all the header stuff - but know that the css/jscript is included)
<html ng-app="Raffler">
<body>
<div ng-controller="ItemCtrl">
<div ng-scroll-viewport style="height:240px;">
<ul>
<li ng-scroll="entry in datasource">
{{entry.name}}
</li>
</ul>
</div>
</div> </body> </html>
Controller: (I'm skipping all the app inclusions, but know that the dependencies are injected)
angular.module("eli.Controllers").controller("ItemCtrl",
["$scope", "Item", function ($scope, Item) {
$scope.items = Item.query();
$scope.datasource = {
get: function(index, count, success) {
// ensure we don't overrun the bounds of the data array
var start = Math.max(0, index);
var end = Math.min(index + count, $scope.items.length);
var results = [];
for (var i = start; i < end; i++) {
results.push($scope.items[i]);
}
success(results);
},
revision: function() {
return $scope.items;
}
};
}
]);
So I'd guess you problem here is that the query hasn't returned when the get function is called on your datasource.
You'll need to verify that the data is ready in your get function. I'm not sure what is on the other side of the query call, but if there is some way to get a promise from that call you can then just use that in the get to execute on the callback when it completes.