Controller As demo

dhilt · dhilt · commit 3832dae1ed26 · 2016-09-29T21:50:08.000+03:00
diff --git a/demo/controllerAs/controllerAs.html b/demo/controllerAs/controllerAs.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html ng-app="application">
+<head>
+    <meta charset="utf-8">
+    <title>Scroller Demo (controller as)</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="controllerAs.js"></script>
+	<link rel="stylesheet" href="../css/style.css" type="text/css"/>
+
+
+</head>
+<body ng-app="application">
+
+<div class="cont cont-global" ng-controller="mainController as mainCtrl" ng-init="show = true">
+	<a class="back" href="../index.html">browse other examples</a>
+	<h1 class="page-header page-header-exapmle">Controller as syntax for the Datasource and the Adapter</h1>
+	<div class="description">
+		If you have defined your controller in such way
+		<div class="code">
+			<pre>&lt;div ng-controller="mainController as mainCtrl"&gt;</pre>
+		</div>
+		then you just shouldn't miss it when you define your datasource or adapter:
+		<div class="code">
+			<pre>&lt;div ui-scroll="item in mainCtrl.datasource" adapter="mainCtrl.adapter"&gt;{{item}<!---->}&lt;/div&gt;</pre>
+		</div>
+		"Hide/Show" button provides a nested scope between mainController and the Viewport via ng-if directive.
+	</div>
+
+	<div class="actions">
+		<button ng-click="show = !show">{{!show ? 'Show' : 'Hide'}}</button>
+		<button ng-click="mainCtrl.updateList()">Update</button>
+	</div>
+
+	<div class="info">
+		<span ng-hide="mainCtrl.adapter.isLoading">data has been loaded</span>
+		<span ng-hide="!mainCtrl.adapter.isLoading">data loading...</span>
+	</div>
+
+	<div ng-if="show">
+		<div ui-scroll-viewport class="viewport viewport-height-fixed" id="viewport-adapter1">
+			<div class="item" ui-scroll="item in mainCtrl.datasource"
+			     adapter="mainCtrl.adapter"
+			     buffer-size='5'>{{item.content}}</div>
+		</div>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/demo/controllerAs/controllerAs.js b/demo/controllerAs/controllerAs.js
@@ -0,0 +1,29 @@
+angular.module('application', ['ui.scroll', 'ui.scroll.jqlite']).controller('mainController', [
+  '$timeout', function($timeout) {
+
+    var datasource = {};
+
+    datasource.get = function(index, count, success) {
+      return $timeout(function() {
+        var i, item, j, ref, ref1, result;
+        result = [];
+        for (i = j = ref = index, ref1 = index + count - 1; ref <= ref1 ? j <= ref1 : j >= ref1; i = ref <= ref1 ? ++j : --j) {
+          item = {};
+          item.id = i;
+          item.content = "item #" + i;
+          result.push(item);
+        }
+        return success(result);
+      }, 100);
+    };
+
+    this.datasource = datasource;
+
+    this.updateList = function() {
+      this.adapter.applyUpdates(function(item, scope) {
+        item.content += ' *';
+      });
+    };
+
+  }
+]);
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="controllerAs/controllerAs.html">
+				controllerAs syntax
+			</a>
+		</li>
 		<li>
 			<a href="adapterOnController/adapterOnController.html">
 				Append on controller
