Ionic.onGesture - Cannot read property 'addEventListener' of undefined


#1

Hello,

I have a modal with tabs and i want the tabs to be changed with gestures, with the swipe gesture to be exact.

<ion-modal-view style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%; background: none;">
    <div style="background: #fff; width: 100%; height: 100px;">
        <ion-content scroll="false" style="height: 100px;">
            ...
        </ion-content>
    </div>
    <div style="background: #fff; width: 100%; height: 75%; position: relative; margin-top: 15px;">
        <ion-tabs class="tabs-light tabs-icon-top">
            <ion-tab title="Simple View"
                     icon-on="ion-ios7-compose"
                     icon-off="ion-ios7-compose-outline"
                     ng-click="selectSimpleViewTab()">
                <ion-content class="padding" id="simpleView">
                    <div class="row">
                        <div class="col col-80 col-offset-10">
                            <div class="list">
                                <div class="item">
                                    ...
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-80 col-offset-10">
                            <div class="list">
                                <div class="item">
                                    ...
                                </div>
                            </div>
                        </div>
                    </div>
                    ...
                </ion-content>
            </ion-tab>
            <ion-tab title="Complete View"
                     icon-on="ion-ios7-paper"
                     icon-off="ion-ios7-paper-outline"
                     ng-click="selectCompleteViewTab()">
                <ion-content class="padding" id="completeView">
                    Complete View
                </ion-content>
            </ion-tab>
        </ion-tabs>
    </div>
</ion-modal-view>

I’ve added custom ng-click events to the tabs so I can load in the gesture event handler when the tab is shown (selectSimpleViewTab() and selectCompleteViewTab()).

$scope.selectSimpleViewTab = function(){
    $ionicTabsDelegate.select(0);
    setTimeout(function(){
        ionic.onGesture('swipeleft', function(e){
            console.log('swiping to left');
            $scope.selectCompleteViewTab();
        }, document.getElementById('simpleView'));
    }, 500);
};

$scope.selectCompleteViewTab = function(){
    $ionicTabsDelegate.select(1);
    setTimeout(function(){
        ionic.onGesture('swiperight', function(e){
            console.log('swiping to right');
            $scope.selectSimpleViewTab();
        }, document.getElementById('completeView'));
    }, 500);
};

The swiping works perfectly. In my console I can see that swiping to right and swiping to left is called. However, the scope function, that switches the tabs, doesn’t get called (selectSimpleViewTab() and selectCompleteViewTab()) and results in:

TypeError: Cannot read property 'addEventListener' of undefined

What could be causing this in the scope functions? The gesture function does get called because the console logs the swipes but the tab change doesn’t get triggered.