Adapter on controller demo

dhilt · dhilt · commit 0f3d0d5da6b9 · 2016-06-05T22:59:22.000+03:00
diff --git a/demo/adapterOnController/adapterOnController.html b/demo/adapterOnController/adapterOnController.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Adapter On Controller</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="../../dist/ui-scroll-jqlite.js"></script>
+	<script src="adapterOnController.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">Adapter On Controller</h1>
+
+		<div class="description">
+			There may be some nested scopes between the ui-scroll and the controller where you want the adapter object to be injected. As it follows from the documentation, <em>adapter="expression on controller"</em> format can be used to explicitly specify the scope associated with the specified controller as the target scope for the injection.
+			<div class="code">
+				<pre>&lt;div ui-scroll="item in datasource" adapter="adapter on mainController"&gt;{{item}<!---->}&lt;/div&gt;</pre>
+			</div>
+			In this sample we have ng-if wrapper over the viewport which causes an intermediate scope. "Is loading" will not work without specifying the controller through the "on controller" syntax .
+		</div>
+
+		<div class="actions" ng-init="reloadIndex = 100">
+			Is loading: {{adapter.isLoading}}
+		</div>
+
+		<div ng-if="delay" class="viewport" id="viewport-serviceDatasource" ui-scroll-viewport>
+			<div class="item" ui-scroll="item in datasource" adapter="adapter on mainController">{{item}}</div>
+		</div>
+
+	</div>
+
+</body>
+</html>
diff --git a/demo/adapterOnController/adapterOnController.js b/demo/adapterOnController/adapterOnController.js
@@ -0,0 +1,24 @@
+angular.module('application', ['ui.scroll', 'ui.scroll.jqlite'])
+	.controller('mainController', [
+		'$scope', '$log', '$timeout', function ($scope, console, $timeout) {
+			var datasource = {};
+
+			datasource.get = function (index, count, success) {
+				$timeout(function () {
+					var result = [];
+					for (var i = index; i <= index + count - 1; i++) {
+						result.push("item #" + i);
+					}
+					success(result);
+				}, 100);
+			};
+
+			$scope.datasource = datasource;
+
+			$scope.delay = false;
+			$timeout(function() {
+				$scope.delay = true;
+			}, 500);
+
+		}
+	]);
diff --git a/demo/index.html b/demo/index.html
@@ -109,6 +109,11 @@ <h1 class="page-header">Scroller Examples</h1>
 				Adapter (updatable scroller)
 			</a>
 		</li>
+		<li>
+			<a href="adapterOnController/adapterOnController.html">
+				Append on controller
+			</a>
+		</li>
 		<li>
 			<a href="append/append.html">
 				Append and prepend sync demo
