integrate iscroll with angular directive

src/js/app.js

@@ -13,7 +13,7 @@ require([
 ], function(angular, LoginCtrl, MailListCtrl, ReadCtrl, WriteCtrl, NavigationCtrl) {
     'use strict';
 
-    var app = angular.module('mail', ['ngRoute', 'ngTouch', 'navigation', 'write', 'read']);
+    var app = angular.module('mail', ['ngRoute', 'ngTouch', 'navigation', 'mail-list', 'write', 'read']);
 
     // set router paths
     app.config(function($routeProvider) {

src/js/controller/mail-list.js

@@ -2,7 +2,9 @@ define(function(require) {
     'use strict';
 
     var _ = require('underscore'),
+        angular = require('angular'),
         appController = require('js/app-controller'),
+        IScroll = require('iscroll'),
         emailDao;
 
     var MailListCtrl = function($scope) {
@@ -207,5 +209,25 @@ define(function(require) {
         return dummys;
     }
 
+    //
+    // Directives
+    //
+
+    var ngModule = angular.module('mail-list', []);
+    ngModule.directive('ngIscroll', function() {
+        return {
+            link: function(scope, elm) {
+                setTimeout(function() {
+                    var myScroll;
+                    // activate iscroll
+                    myScroll = new IScroll(elm[0], {
+                        mouseWheel: true
+                    });
+                }, 0);
+
+            }
+        };
+    });
+
     return MailListCtrl;
 });

src/require-config.js

@@ -20,7 +20,8 @@
 			angularTouch: 'angular/angular-touch.min',
 			moment: 'moment/moment.min',
 			uuid: 'uuid/uuid',
-			openpgp: 'openpgp/openpgp'
+			openpgp: 'openpgp/openpgp',
+			iscroll: 'iscroll/iscroll-min'
 		},
 		shim: {
 			angular: {
@@ -29,6 +30,9 @@
 			openpgp: {
 				exports: 'window'
 			},
+			iscroll: {
+				exports: 'IScroll'
+			},
 			angularRoute: {
 				exports: 'angular',
 				deps: ['angular']

src/sass/views/_mail-list.scss

@@ -39,10 +39,13 @@
 
     }
 
-    ul {
-        padding: 0 $padding-horizontal 78px $padding-horizontal;
+    .list-wrapper {
         height: 100%;
-        overflow-y: scroll;
+        padding: 0 $padding-horizontal 78px $padding-horizontal;
+        overflow-y: hidden;
+    }
+
+    ul {
     }
 
     footer {

src/tpl/mail-list.html

@@ -3,16 +3,18 @@
   <h2>{{currentFolder.type}}</h2>
 </header>
 
-<ul class="mail-list">
-  <li ng-class="{'mail-list-active': email === selected, 'mail-list-attachment': email.attachments !== undefined && email.attachments.length > 0, 'mail-list-unread': email.unread, 'mail-list-replied': email.answered}" ng-click="select(email)" ng-repeat="email in emails">
-    <h3>{{email.from[0].name || email.from[0].address}}</h3>
-    <div class="head">
-      <p class="subject">{{email.subject}}</p>
-      <time>{{email.sentDate | date:'mediumDate'}}</time>
-    </div>
-    <p class="body">{{email.body}}</p>
-  </li>
-</ul><!--/.mail-list-->
+<div class="list-wrapper" ng-iscroll>
+  <ul class="mail-list">
+    <li ng-class="{'mail-list-active': email === selected, 'mail-list-attachment': email.attachments !== undefined && email.attachments.length > 0, 'mail-list-unread': email.unread, 'mail-list-replied': email.answered}" ng-click="select(email)" ng-repeat="email in emails">
+      <h3>{{email.from[0].name || email.from[0].address}}</h3>
+      <div class="head">
+        <p class="subject">{{email.subject}}</p>
+        <time>{{email.sentDate | date:'mediumDate'}}</time>
+      </div>
+      <p class="body">{{email.body}}</p>
+    </li>
+  </ul><!--/.mail-list-->
+</div>
 
 <footer ng-click="synchronize()">
   {{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}