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 {
+    .list-wrapper {
-        padding: 0 $padding-horizontal 78px $padding-horizontal;
         height: 100%;
-        overflow-y: scroll;
+        padding: 0 $padding-horizontal 78px $padding-horizontal;
+        overflow-y: hidden;
+    }
+
+    ul {
     }
 
     footer {

src/tpl/mail-list.html

@@ -3,7 +3,8 @@
   <h2>{{currentFolder.type}}</h2>
 </header>
 
-<ul class="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">
@@ -12,7 +13,8 @@
       </div>
       <p class="body">{{email.body}}</p>
     </li>
-</ul><!--/.mail-list-->
+  </ul><!--/.mail-list-->
+</div>
 
 <footer ng-click="synchronize()">
   {{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}