<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scroller Demo (cache option) </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="cache.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">Cache within datasource implementation</h1>
<div class="description">
<p>
The cache that is implemented here is a facade over standard datasource.
So all you need here is to initialize Cache:
<div class="code">
<pre>datasource.cache.initialize();</pre>
</div>
Base data retrieving method <em>datasource.get()</em> isn't changed.
It may has any implementation like no any cache is presented.
</p>
<p>
You may disable/enable Cache programmatically:
<div class="code">
<pre>datasource.cache.isEnabled = true;</pre>
</div>
Toggle-link demonstrates this ability. You can see the difference between cache and no-cache modes because of <em>$timeout</em> back-end delay emulation on <em>datasource.get</em>.
</p>
</div>
<div class="actions">
Cache is {{datasource.cache.isEnabled ? 'enabled' : 'disabled'}}
<a class="toggler" ng-click="datasource.cache.toggle()">[toggle]</a>
</div>
<div class="viewport" id="viewport-cache" ui-scroll-viewport>
<div class="item" ui-scroll="item in datasource" buffer-size='5'>*{{item.content}}*</div>
</div>
</div>
</body>
</html>