Fixed #279 - transclusion issue with content

dist/js/ionic-angular.js

@@ -64,7 +64,7 @@ angular.module('ionic', [
 
 angular.module('ionic.ui.service.scrollDelegate', [])
 
-.factory('ScrollDelegate', ['$rootScope', function($rootScope) {
+.factory('ScrollDelegate', ['$rootScope', '$timeout', function($rootScope, $timeout) {
   return {
     /**
      * Trigger a scroll-to-top event on child scrollers.
@@ -1181,7 +1181,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
   return {
     restrict: 'E',
     replace: true,
-    template: '<div class="scroll-content"></div>',
+    template: '<div class="scroll-content"><div class="scroll" ng-transclude></div></div>',
     transclude: true,
     scope: {
       onRefresh: '&',
@@ -1193,6 +1193,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
       infiniteScrollDistance: '@',
       hasBouncing: '@',
       scroll: '@',
+      padding: '@',
       hasScrollX: '@',
       hasScrollY: '@',
       scrollbarX: '@',
@@ -1208,30 +1209,22 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
 
       return function link($scope, $element, $attr) {
         var clone, sc, sv,
-          addedPadding = false,
-          c = $element.eq(0);
+          c = angular.element($element.children()[0]);
+
+        // if padding attribute is true, then add padding if it wasn't added to the .scroll
+        if($scope.$eval($scope.padding) === true) {
+          c.addClass('padding');
+        }
 
-        // If they want plain overflow scrolling, add that as a class
         if($scope.scroll === "false") {
-          clone = transclude($scope.$parent);
-          $element.append(clone);
-        } else if(attr.overflowScroll === "true") {
-          c.addClass('overflow-scroll');
-          clone = transclude($scope.$parent); 
-          $element.append(clone);
+          // No scrolling
+          return;
+        } 
+        
+        // If they want plain overflow scrolling, add that as a class
+        if(attr.overflowScroll === "true") {
+          $element.addClass('overflow-scroll');
         } else {
-          sc = document.createElement('div');
-          sc.className = 'scroll';
-          if(attr.padding == "true") {
-            sc.className += ' padding';
-            addedPadding = true;
-          }
-          $element.append(sc);
-
-          // Pass the parent scope down to the child
-          clone = transclude($scope.$parent);
-          angular.element($element[0].firstElementChild).append(clone);
-
           var refresher = $element[0].querySelector('.scroll-refresher');
           var refresherHeight = refresher && refresher.clientHeight || 0;
 
@@ -1322,11 +1315,6 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
           }
         }
 
-        // if padding attribute is true, then add padding if it wasn't added to the .scroll
-        if(attr.padding == "true" && !addedPadding) {
-          c.addClass('padding');
-        }
-
       };
     }
   };

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

@@ -22,7 +22,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
   return {
     restrict: 'E',
     replace: true,
-    template: '<div class="scroll-content"></div>',
+    template: '<div class="scroll-content"><div class="scroll" ng-transclude></div></div>',
     transclude: true,
     scope: {
       onRefresh: '&',
@@ -34,6 +34,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
       infiniteScrollDistance: '@',
       hasBouncing: '@',
       scroll: '@',
+      padding: '@',
       hasScrollX: '@',
       hasScrollY: '@',
       scrollbarX: '@',
@@ -49,30 +50,22 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
 
       return function link($scope, $element, $attr) {
         var clone, sc, sv,
-          addedPadding = false,
-          c = $element.eq(0);
+          c = angular.element($element.children()[0]);
+
+        // if padding attribute is true, then add padding if it wasn't added to the .scroll
+        if($scope.$eval($scope.padding) === true) {
+          c.addClass('padding');
+        }
 
-        // If they want plain overflow scrolling, add that as a class
         if($scope.scroll === "false") {
-          clone = transclude($scope.$parent);
-          $element.append(clone);
-        } else if(attr.overflowScroll === "true") {
-          c.addClass('overflow-scroll');
-          clone = transclude($scope.$parent); 
-          $element.append(clone);
+          // No scrolling
+          return;
+        } 
+        
+        // If they want plain overflow scrolling, add that as a class
+        if(attr.overflowScroll === "true") {
+          $element.addClass('overflow-scroll');
         } else {
-          sc = document.createElement('div');
-          sc.className = 'scroll';
-          if(attr.padding == "true") {
-            sc.className += ' padding';
-            addedPadding = true;
-          }
-          $element.append(sc);
-
-          // Pass the parent scope down to the child
-          clone = transclude($scope.$parent);
-          angular.element($element[0].firstElementChild).append(clone);
-
           var refresher = $element[0].querySelector('.scroll-refresher');
           var refresherHeight = refresher && refresher.clientHeight || 0;
 
@@ -163,11 +156,6 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
           }
         }
 
-        // if padding attribute is true, then add padding if it wasn't added to the .scroll
-        if(attr.padding == "true" && !addedPadding) {
-          c.addClass('padding');
-        }
-
       };
     }
   };

js/ext/angular/src/service/delegates/ionicScrollDelegate.js

@@ -3,7 +3,7 @@
 
 angular.module('ionic.ui.service.scrollDelegate', [])
 
-.factory('ScrollDelegate', ['$rootScope', function($rootScope) {
+.factory('ScrollDelegate', ['$rootScope', '$timeout', function($rootScope, $timeout) {
   return {
     /**
      * Trigger a scroll-to-top event on child scrollers.

js/ext/angular/test/content.html

@@ -68,6 +68,7 @@
         has-tabs="true"
         has-header="true"
         >
+        <button ng-click="add()">Click</button>
         <ul class="list" ng-controller="AppCtrl">
           <li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
         </ul>
@@ -115,6 +116,9 @@
         var startTop = header.offsetTop;
         $scope.onScrollComplete = function(event, scrollTop, scrollLeft) {
         }
+        $scope.add = function() {
+          console.log('Adding!');
+        };
         var last = 0;
         $scope.onScroll = function(event, scrollTop, scrollLeft) {
         /*

js/ext/angular/test/contentClick.html

@@ -0,0 +1,80 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Content</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/angular/angular.js"></script>
+    <script src="../../../../dist/js/angular/angular-animate.js"></script>
+    <script src="../../../../dist/js/angular/angular-route.js"></script>
+    <script src="../../../../dist/js/angular/angular-touch.js"></script>
+    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
+    <script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <style>
+      .reveal-animation {
+        /*
+        -webkit-transform: translate3d(0%, 0, 0);
+                transform: translate3d(0%, 0, 0);
+
+       -webkit-transition: -webkit-transform 1s ease-in-out;
+               transition:         transform 1s ease-in-out;
+        */
+      }
+      .reveal-animation.ng-enter {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(100%,0,0) ;
+      }
+      .reveal-animation.ng-enter-active {
+        -webkit-transform:translate3d(0,0,0) ;
+      }
+      .reveal-animation.ng-leave {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(0%,0,0);
+      }
+      .reveal-animation.ng-leave-active {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(-100%,0,0);
+      }
+
+      .scroll-refresher {
+        border-bottom: 1px solid #eee;
+      }
+      #refresh-content {
+        color: #999;
+        text-align: center;
+        font-size: 48px;
+        position: absolute;
+        bottom: 10px;
+        width: 100%;
+      }
+    </style>
+
+  </head>
+  <body>
+    <tabs>
+      <tab ng-controller="MyCtrl">
+        <content>
+          <button ng-click="add()">add</button>
+          {{count}}
+        </content>
+      </tab>
+    </tabs>
+
+    <script>
+      angular.module('navTest', ['ionic'])
+
+      .controller('MyCtrl', function($scope) {
+        $scope.count = 0;
+        $scope.add = function(){
+          $scope.count ++;
+        }
+      });
+    </script>
+  </body>
+</html>
+