2016-07-26 19 views
0

に垂直スクロールイベントを延期:イオン/ AngularJS - 私はこのようなコンテンツを持つ親要素

<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> 

は基本的に私が欲しいものをどの親コンテナ(イオン含有量)内に複数の水平スクロールバー(イオンスクロール)であります垂直方向にスクロールします。問題は、水平のスクロールバーをつかみ、それを垂直にドラッグしようとすると機能しないため、そのイベントを親に延期する必要があるということです。

私は、デリゲートの機能を参照してください。

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

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

をしかし、私はそのイベントをつかむと、それに有益な何かをするかどうかはわかりません。助けて?

+0

一般的にDOMイベントに火角度ディレクティブは '$のevent'経由でイベントを公開します。私はそれが最初に存在するかどうかを見てみるだろう。それから、$ event.preventDefault()か何かを呼び出して親に渡すことができるはずです。 – jusopi

答えて

0

解決しました。それは私がそれがそうであると思ったより複雑な方法ですが、それは動作します。以下の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); 
    }); 
}); 
関連する問題