"Inside the directive" demo

dhilt · dhilt · commit 46ef8e8504ad · 2016-10-31T16:15:47.000+03:00
diff --git a/demo/index.html b/demo/index.html
@@ -111,7 +111,12 @@ <h1 class="page-header">Scroller Examples</h1>
 		</li>
 		<li>
 			<a href="controllerAs/controllerAs.html">
-				controllerAs syntax
+				"Controller as" syntax
+			</a>
+		</li>
+		<li>
+			<a href="insideDirective/insideDirective.html">
+				Inside the directive (+ "Controller as" syntax)
 			</a>
 		</li>
 		<li>
diff --git a/demo/insideDirective/insideDirective.html b/demo/insideDirective/insideDirective.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Inside directive</title>
+	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
+	<script src="../../dist/ui-scroll.js"></script>
+	<script src="../../dist/ui-scroll-jqlite.js"></script>
+	<script src="insideDirective.js"></script>
+	<link rel="stylesheet" href="../css/style.css" type="text/css"/>
+</head>
+<body 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">Scroller inside the directive</h1>
+
+		<div class="description">
+			This sample demonstrates encapsulation of the ui-scroll directive inside another custom directive wich has it's own controller and wich uses "Controller As" syntax in it's template.
+		</div>
+
+		<my-dir></my-dir>
+
+	</div>
+
+</body>
+</html>
diff --git a/demo/insideDirective/insideDirective.js b/demo/insideDirective/insideDirective.js
@@ -0,0 +1,37 @@
+angular.module('application', ['ui.scroll', 'ui.scroll.jqlite'])
+	.directive('myDir', function() {
+		return {
+			restrict: 'E',
+			controllerAs: 'ctrl',
+			template:
+			'<div ui-scroll-viewport class="viewport" ng-if="ctrl.show">' +
+				'<div class="item" ui-scroll="item in ctrl" adapter="ctrl.scrollAdapter">' +
+					'<div ng-click="ctrl.update(item.id)">{{item.name}}</div>' +
+				'</div>' +
+			'</div>',
+			controller: function ($timeout) {
+				var ctrl = this;
+				ctrl.show = true;
+				ctrl.get = function(index, count, success) {
+					$timeout(function () {
+						var result = [];
+						for (var i = index; i <= index + count - 1; i++) {
+							result.push({
+								id: i,
+								name: "item #" + i
+							});
+						}
+						success(result);
+					}, 100);
+				}
+				ctrl.update = function(id) {
+					return ctrl.scrollAdapter.applyUpdates(function(item) {
+						if (item.id === id) {
+							item.name += " *";
+						}
+				  });
+				}
+			}
+		}
+	}
+);
