Ionic/AngularJS - aufzuschieben vertikale Scroll-Ereignis zu übergeordnetes Element

Question

Ich habe Inhalt wie folgt aus:

<ion-content delegate-handle="mainScroll"> 
    <ion-scroll delegate-handle="horizontalScroll" direction="x"> 
    </ion-scroll> 
    <ion-scroll delegate-handle="horizontalScroll" direction="x"> 
    </ion-scroll> 
    <ion-scroll delegate-handle="horizontalScroll" direction="x"> 
    </ion-scroll> 
</ion-content> 

Im Allgemeinen, was ich will mehrere horizontale scrollers (Ionen scroll) innerhalb eines übergeordneten Container (Ionengehalt) ist, die scrollt vertikal. Das Problem ist, dass es nicht funktioniert, wenn ich versuche, den horizontalen Scroller zu greifen und vertikal zu ziehen, also muss ich dieses Event irgendwie auf den übergeordneten verschieben.

Ich sehe die Delegatfunktion:

<ion-scroll delegate-handle="horizontalScroll" direction="x" on-scroll="delegateScroll()"> 
</ion-scroll> 

$scope.delegateScroll = function() { 
    // what do I do here? 
} 

Aber ich bin nicht sicher, wie dieses Ereignis greifen und etwas Nützliches tun mit ihm. Hilfe?

Answer 1

Mein eigenes Problem gelöst. Es ist viel komplizierter als ich dachte, aber es funktioniert. Siehe den untenstehenden CodePen.

http://codepen.io/anon/pen/BoGkA

angular.module('ionicApp', ['ionic']) 
.controller('MyCtrl', function($scope, $ionicScrollDelegate, $timeout) { 
    $timeout(function(){ 
    return false; // <--- comment this to "fix" the problem 
    var sv = $ionicScrollDelegate.$getByHandle('horizontal').getScrollView(); 

    var container = sv.__container; 

    var originaltouchStart = sv.touchStart; 
    var originalmouseDown = sv.mouseDown; 
    var originaltouchMove = sv.touchMove; 
    var originalmouseMove = sv.mouseMove; 

    container.removeEventListener('touchstart', sv.touchStart); 
    container.removeEventListener('mousedown', sv.mouseDown); 
    document.removeEventListener('touchmove', sv.touchMove); 
    document.removeEventListener('mousemove', sv.mousemove); 


    sv.touchStart = function(e) { 
     e.preventDefault = function(){} 
     originaltouchStart.apply(sv, [e]); 
    } 

    sv.touchMove = function(e) { 
     e.preventDefault = function(){} 
     originaltouchMove.apply(sv, [e]); 
    } 

    sv.mouseDown = function(e) { 
     e.preventDefault = function(){} 
     originalmouseDown.apply(sv, [e]); 
    } 

    sv.mouseMove = function(e) { 
     e.preventDefault = function(){} 
     originalmouseMove.apply(sv, [e]); 
    } 

    container.addEventListener("touchstart", sv.touchStart, false); 
    container.addEventListener("mousedown", sv.mouseDown, false); 
    document.addEventListener("touchmove", sv.touchMove, false); 
    document.addEventListener("mousemove", sv.mouseMove, false); 
    }); 
});