Fixed #56 - pull to drag

dist/js/ionic-angular.js

@@ -481,13 +481,16 @@ angular.module('ionic.ui.content', [])
 
 // The content directive is a core scrollable content area
 // that is part of many View hierarchies
-.directive('content', function() {
+.directive('content', ['$parse', function($parse) {
   return {
     restrict: 'E',
     replace: true,
     template: '<div class="scroll-content"><div class="scroll"></div></div>',
     transclude: true,
-    scope: true,
+    scope: {
+      onRefresh: '&',
+      onRefreshOpening: '&'
+    },
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr) {
         var c = $element.eq(0);
@@ -506,7 +509,6 @@ angular.module('ionic.ui.content', [])
           c.addClass('has-tabs');
         }
 
-
         // If they want plain overflows scrolling, add that as a class
         if(attr.overflowScroll === "true") {
           c.addClass('overflow-scroll');
@@ -514,23 +516,25 @@ angular.module('ionic.ui.content', [])
           // Otherwise, supercharge this baby!
           var sv = new ionic.views.Scroll({
             el: $element[0].firstElementChild,
+            hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'),
             onRefresh: function() {
-              $scope.onRefresh && $scope.onRefresh();
+              $scope.onRefresh();
             },
             onRefreshOpening: function(amt) {
-              $scope.onRefreshOpening && $scope.onRefreshOpening({amount: amt});
+              $scope.onRefreshOpening({amount: amt});
             }
           });
           // Let child scopes access this 
           $scope.scrollView = sv;
         }
 
-        var clone = transclude($scope);
+        // Pass the parent scope down to the child
+        var clone = transclude($scope.$parent);
         angular.element($element[0].firstElementChild).append(clone);
       };
     }
   };
-})
+}])
 
 .directive('refresher', function() {
   return {

dist/js/ionic.js

@@ -2414,21 +2414,24 @@ window.ionic = {
       // Grab the refresher element if using Pull to Refresh
       if(this.hasPullToRefresh) {
         this._refresher = document.querySelector('.scroll-refresher');
-        this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
-        // We always start the refresher hidden
-        if(this.y < 0) {
-          this._isRefresherHidden = true;
-          this._refresher.style.display = 'none';
-        } else {
-          this._isRefresherHidden = false;
-          this._didTriggerRefresh = false;
-          this._refresher.style.display = 'block';
-        }
-
-        this._isHoldingRefresh = false;
 
         if(this._refresher) {
-          this._refresher.classList.remove('scroll-refreshing');
+          this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
+          // We always start the refresher hidden
+          if(this.y < 0) {
+            this._isRefresherHidden = true;
+            this._refresher.style.display = 'none';
+          } else {
+            this._isRefresherHidden = false;
+            this._didTriggerRefresh = false;
+            this._refresher.style.display = 'block';
+          }
+
+          this._isHoldingRefresh = false;
+
+          if(this._refresher) {
+            this._refresher.classList.remove('scroll-refreshing');
+          }
         }
       }
 

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

@@ -14,13 +14,16 @@ angular.module('ionic.ui.content', [])
 
 // The content directive is a core scrollable content area
 // that is part of many View hierarchies
-.directive('content', function() {
+.directive('content', ['$parse', function($parse) {
   return {
     restrict: 'E',
     replace: true,
     template: '<div class="scroll-content"><div class="scroll"></div></div>',
     transclude: true,
-    scope: true,
+    scope: {
+      onRefresh: '&',
+      onRefreshOpening: '&'
+    },
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr) {
         var c = $element.eq(0);
@@ -39,7 +42,6 @@ angular.module('ionic.ui.content', [])
           c.addClass('has-tabs');
         }
 
-
         // If they want plain overflows scrolling, add that as a class
         if(attr.overflowScroll === "true") {
           c.addClass('overflow-scroll');
@@ -47,23 +49,25 @@ angular.module('ionic.ui.content', [])
           // Otherwise, supercharge this baby!
           var sv = new ionic.views.Scroll({
             el: $element[0].firstElementChild,
+            hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'),
             onRefresh: function() {
-              $scope.onRefresh && $scope.onRefresh();
+              $scope.onRefresh();
             },
             onRefreshOpening: function(amt) {
-              $scope.onRefreshOpening && $scope.onRefreshOpening({amount: amt});
+              $scope.onRefreshOpening({amount: amt});
             }
           });
           // Let child scopes access this 
           $scope.scrollView = sv;
         }
 
-        var clone = transclude($scope);
+        // Pass the parent scope down to the child
+        var clone = transclude($scope.$parent);
         angular.element($element[0].firstElementChild).append(clone);
       };
     }
   };
-})
+}])
 
 .directive('refresher', function() {
   return {

js/ext/angular/test/content.html

@@ -7,9 +7,9 @@
     <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/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/angular-touch.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
     <style>
       .reveal-animation {
         /*
@@ -50,12 +50,12 @@
     </style>
 
   </head>
-  <body>
+  <body ng-controller="AppCtrl">
 
     <header class="bar bar-header bar-success">
       <button class="button"><i class="icon ion-home"></i></button>
     </header>
-    <content on-refresh="onRefresh()" on-refresh-opening="onRefreshOpening(amount)" has-header="true" ng-controller="AppCtrl" class="reveal-animation">
+    <content on-refresh="onRefresh()" on-refresh-opening="onRefreshOpening(amount)" has-header="true" class="reveal-animation">
       <refresher>
         <div id="refresh-content">
           <i class="icon ion-ios7-reloading"></i>

js/ext/angular/test/tabs.html

@@ -5,9 +5,9 @@
 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
-    <script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
-    <script src="/vendor/angular/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
-    <script src="/vendor/angular/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
     <style>
       .fade-out > .ng-enter, 
       .fade-out > .ng-leave, 
@@ -109,7 +109,7 @@
     <script src="../../../../dist/js/ionic.js"></script>
     <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
-      angular.module('tabsTest', ['ionic.ui', 'ionic.service.modal', 'ionic.service.actionSheet'])
+      angular.module('tabsTest', ['ionic'])
 
       .controller('RootCtrl', function($scope) {
         $scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {

js/views/scrollView.js

@@ -477,21 +477,24 @@
       // Grab the refresher element if using Pull to Refresh
       if(this.hasPullToRefresh) {
         this._refresher = document.querySelector('.scroll-refresher');
-        this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
-        // We always start the refresher hidden
-        if(this.y < 0) {
-          this._isRefresherHidden = true;
-          this._refresher.style.display = 'none';
-        } else {
-          this._isRefresherHidden = false;
-          this._didTriggerRefresh = false;
-          this._refresher.style.display = 'block';
-        }
-
-        this._isHoldingRefresh = false;
 
         if(this._refresher) {
-          this._refresher.classList.remove('scroll-refreshing');
+          this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
+          // We always start the refresher hidden
+          if(this.y < 0) {
+            this._isRefresherHidden = true;
+            this._refresher.style.display = 'none';
+          } else {
+            this._isRefresherHidden = false;
+            this._didTriggerRefresh = false;
+            this._refresher.style.display = 'block';
+          }
+
+          this._isHoldingRefresh = false;
+
+          if(this._refresher) {
+            this._refresher.classList.remove('scroll-refreshing');
+          }
         }
       }