Fixed #77, scroll support for <content> dir

dist/css/ionic-ios7.css

@@ -365,10 +365,8 @@ body, .ionic-body {
 
 .content {
   position: absolute;
-  overflow: auto;
   width: 100%;
-  height: 100%;
+  height: 100%; }
-  -webkit-overflow-scrolling: touch; }
 
 .scroll-content {
   position: absolute;
@@ -378,6 +376,10 @@ body, .ionic-body {
   bottom: 0;
   overflow: hidden; }
 
+.overflow-scroll {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch; }
+
 .has-header {
   top: 44px; }
 

dist/css/ionic-scoped.css

@@ -1789,10 +1789,8 @@
     transform: translateZ(0px); }
   .ionic .content {
     position: absolute;
-    overflow: auto;
     width: 100%;
-    height: 100%;
+    height: 100%; }
-    -webkit-overflow-scrolling: touch; }
   .ionic .scroll-content {
     position: absolute;
     top: 0;
@@ -1800,6 +1798,9 @@
     right: 0;
     bottom: 0;
     overflow: hidden; }
+  .ionic .overflow-scroll {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch; }
   .ionic .has-header {
     top: 44px; }
   .ionic .has-footer {

dist/css/ionic.css

@@ -2196,10 +2196,8 @@ body, .ionic-body {
 
 .content {
   position: absolute;
-  overflow: auto;
   width: 100%;
-  height: 100%;
+  height: 100%; }
-  -webkit-overflow-scrolling: touch; }
 
 .scroll-content {
   position: absolute;
@@ -2209,6 +2207,10 @@ body, .ionic-body {
   bottom: 0;
   overflow: hidden; }
 
+.overflow-scroll {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch; }
+
 .has-header {
   top: 44px; }
 

dist/js/ionic-angular.js

@@ -14,6 +14,7 @@ angular.module('ionic.service', [
 
 angular.module('ionic.ui', [
                             'ionic.ui.content',
+                            'ionic.ui.scroll',
                             'ionic.ui.tabs',
                             'ionic.ui.nav',
                             'ionic.ui.sideMenu',
@@ -456,7 +457,7 @@ angular.module('ionic.ui.content', [])
   return {
     restrict: 'E',
     replace: true,
-    template: '<div class="content"></div>',
+    template: '<div class="scroll-content"><div class="scroll"></div></div>',
     transclude: true,
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr) {
@@ -475,7 +476,22 @@ angular.module('ionic.ui.content', [])
         if(attr.hasTabs) {
           c.addClass('has-tabs');
         }
-        $element.append(transclude($scope));
+
+
+        // If they want plain overflows scrolling, add that as a class
+        if(attr.overflowScroll === "true") {
+          c.addClass('overflow-scroll');
+        } else {
+          // Otherwise, supercharge this baby!
+          var sv = new ionic.views.Scroll({
+            el: $element[0].firstElementChild
+          });
+          // Let child scopes access this 
+          $scope.scrollView = sv;
+        }
+
+        var clone = transclude($scope);
+        angular.element($element[0].firstElementChild).append(clone);
       };
     }
   };
@@ -919,29 +935,6 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 
 })();
 ;
-(function(ionic) {
-'use strict';
-
-/**
- * @description
- * The scroll directive lets you enable a content area for 
- * our custom momentum scrolling area. The benefit to a custom
- * scroll area is configurability, and avoidance of the 
- * buggy -webkit-overflow-scrolling: touch.
- */
-
-angular.module('ionic.ui.scroll', [])
-
-.directive('scroll', function() {
-  return {
-    restrict: 'ECA',
-    replace: true,
-    transclude: true,
-    template: '<div class="scroll-content" ng-transclude></div>'
-  };
-});
-})(window.ionic);
-;
 (function() {
 'use strict';
 

js/ext/angular/src/directive/ionicContent.js

@@ -18,7 +18,7 @@ angular.module('ionic.ui.content', [])
   return {
     restrict: 'E',
     replace: true,
-    template: '<div class="content"></div>',
+    template: '<div class="scroll-content"><div class="scroll"></div></div>',
     transclude: true,
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr) {
@@ -37,7 +37,22 @@ angular.module('ionic.ui.content', [])
         if(attr.hasTabs) {
           c.addClass('has-tabs');
         }
-        $element.append(transclude($scope));
+
+
+        // If they want plain overflows scrolling, add that as a class
+        if(attr.overflowScroll === "true") {
+          c.addClass('overflow-scroll');
+        } else {
+          // Otherwise, supercharge this baby!
+          var sv = new ionic.views.Scroll({
+            el: $element[0].firstElementChild
+          });
+          // Let child scopes access this 
+          $scope.scrollView = sv;
+        }
+
+        var clone = transclude($scope);
+        angular.element($element[0].firstElementChild).append(clone);
       };
     }
   };

js/ext/angular/src/directive/ionicScroll.js

@@ -1,22 +0,0 @@
-(function(ionic) {
-'use strict';
-
-/**
- * @description
- * The scroll directive lets you enable a content area for 
- * our custom momentum scrolling area. The benefit to a custom
- * scroll area is configurability, and avoidance of the 
- * buggy -webkit-overflow-scrolling: touch.
- */
-
-angular.module('ionic.ui.scroll', [])
-
-.directive('scroll', function() {
-  return {
-    restrict: 'ECA',
-    replace: true,
-    transclude: true,
-    template: '<div class="scroll-content" ng-transclude></div>'
-  };
-});
-})(window.ionic);

js/ext/angular/src/ionicAngular.js

@@ -14,6 +14,7 @@ angular.module('ionic.service', [
 
 angular.module('ionic.ui', [
                             'ionic.ui.content',
+                            'ionic.ui.scroll',
                             'ionic.ui.tabs',
                             'ionic.ui.nav',
                             'ionic.ui.sideMenu',

js/ext/angular/test/scroll.html

@@ -0,0 +1,33 @@
+<html ng-app="scrollTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Side Menus</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+  </head>
+  <body>
+    <content has-header="true">
+      <div ng-controller="ScrollCtrl">
+        Realllllyyy long content
+        <div style="height: 2000px; background-color: red;"></div>
+      </div>
+    </content>
+
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('scrollTest', ['ionic'])
+
+      .controller('ScrollCtrl', function($scope) {
+        console.log($scope.scrollView);
+      });
+    </script>
+  </body>
+</html>
+

scss/ionic/_scaffolding.scss

@@ -61,10 +61,8 @@ body, .ionic-body {
 
 .content {
   position: absolute;
-  overflow: auto;
   width: 100%;
   height: 100%;
-  -webkit-overflow-scrolling: touch;
 }
 
 .scroll-content {
@@ -77,6 +75,11 @@ body, .ionic-body {
 }
 // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
 // Note: For these to work, content must come after both bars in the markup
+
+.overflow-scroll {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
 .has-header {
   top: $bar-height;
 }