new demo: angular 1.5 component and es6 class controller

dhilt · dhilt · commit 5b16a0eaa988 · 2016-11-21T17:54:04.000+03:00
diff --git a/demo/index.html b/demo/index.html
@@ -119,6 +119,11 @@ <h1 class="page-header">Scroller Examples</h1>
 				Inside the directive (+ "Controller as" syntax)
 			</a>
 		</li>
+		<li>
+			<a href="insideComponent/insideComponent.html">
+				Inside the es6 component
+			</a>
+		</li>
 		<li>
 			<a href="adapterOnController/adapterOnController.html">
 				Append on controller
@@ -153,7 +158,7 @@ <h1 class="page-header">Scroller Examples</h1>
 			<a href="grid-layout-manipulations/grid-layout-manipulations.html">
 				Grid layout manipulations
 			</a>
-		</li>	
+		</li>
 		<li>
 			<a href="grid-dnd-sort/grid-dnd-sort.html">
 				Grid drag and drop sort, moveBefore
@@ -177,4 +182,4 @@ <h1 class="page-header">Scroller Examples</h1>
 
 </div>
 </body>
-</html>
+</html>
diff --git a/demo/insideComponent/insideComponent.html b/demo/insideComponent/insideComponent.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Inside es6 component</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="insideComponent.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 ES6 Component</h1>
+
+		<div class="description">
+			This sample demonstrates encapsulation of the ui-scroll directive inside some custom component (Angular 1.5+). The controller of this Component is implemented as ES6 class. Note that this demo might not work in old browsers which don't support ES6 classes.
+		</div>
+
+		<my-component></my-component>
+
+	</div>
+
+</body>
+</html>
diff --git a/demo/insideComponent/insideComponent.js b/demo/insideComponent/insideComponent.js
@@ -0,0 +1,44 @@
+(function(angular) {
+
+  class Ctrl {
+    constructor($timeout) {
+        this.timeout = $timeout;
+				this.show = true;
+    }
+
+    get(index, count, success) {
+      this.timeout(function () {
+        var result = [];
+        for (var i = index; i <= index + count - 1; i++) {
+          result.push({
+            id: i,
+            name: "item #" + i
+          });
+        }
+        success(result);
+      }, 100);
+    }
+
+    update(id) {
+      return this.scrollAdapter.applyUpdates(function(item) {
+        if (item.id === id) {
+          item.name += " *";
+        }
+      });
+    }
+  }
+
+  angular
+    .module('application', ['ui.scroll', 'ui.scroll.jqlite'])
+    .component('myComponent', {
+      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: Ctrl
+    });
+    
+})(angular);
