<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Datasource on scope (not as service)</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="../../dist/ui-scroll.js"></script>
<script src="scopeDatasource.js" ></script>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
</head>
<body ng-controller="mainController" ng-app="application">
<div class="cont cont-global">
<a class="back" href="../index.html">browse other examples</a>
<h1 class="page-header page-header-exapmle">Datasource on scope (not as service)</h1>
<div class="description">
Per documentation the datasource object can be defined in two different ways.
<div class="code">
<pre><li ui-scroll="item in datasource">{{item}<!---->}</li></pre>
</div>
And the directive will first look for a property with the given name (datasource) on its $scope.
So to use scope-approach you need to declare <i>datasource</i> object on scope of your controller and define method <i>get</i> on it.
<div class="code">
<pre>
angular.module('application', ['ui.scroll'])
.controller('mainController', ...
var get = function(index, count, success) { ... };
$scope.datasource = { get: get };
);</pre>
</div>
</div>
<div class="viewport" id="viewport-scopeDatasource" ui-scroll-viewport>
<div class="item" ui-scroll="item in datasource">{{item}}</div>
</div>
</div>
</body>
</html>