diff --git a/ionic/components/scroll/pull-to-refresh.ts b/ionic/components/scroll/pull-to-refresh.ts
index d49c3f3081..65241ce8b1 100644
--- a/ionic/components/scroll/pull-to-refresh.ts
+++ b/ionic/components/scroll/pull-to-refresh.ts
@@ -19,8 +19,8 @@ import {raf, ready, CSS} from '../../util/dom';
* ```html
*
*
+ * (refresh)="doRefresh($event)"
+ * (pulling)="doPulling($event)">
*
*
*
@@ -29,23 +29,24 @@ import {raf, ready, CSS} from '../../util/dom';
*
* ```ts
* export class MyClass {
- * constructor(){}
+ *
* doRefresh(refresher) {
- * console.debug('Refreshing!', refresher);
+ * console.log('Refreshing', refresher)
*
* setTimeout(() => {
- * console.debug('Pull to refresh complete!', refresher);
* refresher.complete();
- * })
+ * console.log("Complete");
+ * }, 5000);
* }
*
- * doStarting() {
- * console.debug('Pull started!');
+ * doStarting(refresher) {
+ * console.log('Starting', refresher);
* }
*
- * doPulling(amt) {
- * console.debug('You have pulled', amt);
+ * doPulling(refresher) {
+ * console.log('Pulling', refresher);
* }
+ *
* }
* ```
* @demo /docs/v2/demos/refresher/
@@ -191,19 +192,19 @@ export class Refresher {
/**
- * @output {any} the methond on your class you want to perform when you are pulling down
+ * @output {event} When you are pulling down
*/
- @Output() pulling: EventEmitter = new EventEmitter();
+ @Output() pulling: EventEmitter = new EventEmitter();
/**
- * @output {any} the methond on your class you want to perform when you refreshing
+ * @output {event} When you are refreshing
*/
- @Output() refresh: EventEmitter = new EventEmitter();
+ @Output() refresh: EventEmitter = new EventEmitter();
/**
- * @output {any} the methond on your class you want to perform when you start pulling down
+ * @output {event} When you start pulling down
*/
- @Output() starting: EventEmitter = new EventEmitter();
+ @Output() starting: EventEmitter = new EventEmitter();
constructor(
@@ -304,7 +305,7 @@ export class Refresher {
activate() {
//this.ele.classList.add('active');
this.isActive = true;
- //this.starting.next();
+ this.starting.emit(this);
}
/**
@@ -327,7 +328,7 @@ export class Refresher {
start() {
// startCallback
this.isRefreshing = true;
- this.refresh.next(this);
+ this.refresh.emit(this);
//$scope.$onRefresh();
}
@@ -484,8 +485,8 @@ export class Refresher {
// overscroll according to the user's drag so far
this.overscroll( Math.round((this.deltaY - this.dragOffset) / 3) );
- // Pass an incremental pull amount to the EventEmitter
- this.pulling.next(this.lastOverscroll);
+ // Pass the refresher to the EventEmitter
+ this.pulling.emit(this);
// update the icon accordingly
if (!this.activated && this.lastOverscroll > this.ptrThreshold) {
diff --git a/ionic/components/scroll/test/pull-to-refresh/index.ts b/ionic/components/scroll/test/pull-to-refresh/index.ts
index f27fb00f95..706d7f219c 100644
--- a/ionic/components/scroll/test/pull-to-refresh/index.ts
+++ b/ionic/components/scroll/test/pull-to-refresh/index.ts
@@ -5,9 +5,23 @@ import {App} from '../../../../../ionic/ionic';
templateUrl: 'main.html'
})
class E2EApp {
+ items = [];
+
+ constructor() {
+ for(let i = 0; i < 20; i++) {
+ this.items.push({ "index": i });
+ }
+ }
doRefresh(refresher) {
- console.log('DOREFRESH', refresher)
+ console.log('Refreshing', refresher)
+
+ // Add to the top of the list on refresh
+ let firstIndex = this.items[0].index - 1;
+
+ for(let i = firstIndex; i > firstIndex - 5; i--) {
+ this.items.unshift({ "index": i });
+ }
setTimeout(() => {
refresher.complete();
@@ -15,11 +29,11 @@ class E2EApp {
}, 5000);
}
- doStarting() {
- console.log('DOSTARTING');
+ doStarting(refresher) {
+ console.log('Starting', refresher);
}
- doPulling(amt) {
- console.log('DOPULLING', amt);
+ doPulling(refresher) {
+ console.log('Pulling', refresher);
}
}
diff --git a/ionic/components/scroll/test/pull-to-refresh/main.html b/ionic/components/scroll/test/pull-to-refresh/main.html
index d3f8b974fb..a4b0eb052c 100644
--- a/ionic/components/scroll/test/pull-to-refresh/main.html
+++ b/ionic/components/scroll/test/pull-to-refresh/main.html
@@ -3,20 +3,16 @@
+ (refresh)="doRefresh($event)"
+ (pulling)="doPulling($event)"
+ pullingIcon="heart"
+ pullingText="release to refresh..."
+ refreshingIcon="star"
+ refreshingText="refreshing...">
-
-
-
-
-
-
-
+
+
+ Item {{ item.index }}
+
+
-
-