首页 文章

$ ionicScrollDelegate在离子侧菜单angualrjs中不起作用

提问于
浏览
2

我目前正在我的移动应用程序中使用$ ionicScrollDelegate . 我的目标是当用户点击 Headers 栏时,它会自动滚动到顶部 . 我现在的问题是当我在我的代码中包含离子侧菜单时,$ ionicScrollDelegate无法向后滚动,我创建了一个按钮它返回它们的位置,但不能向后滚动 . 我试图找出为什么$ ionicScrollDelegate在我包含侧面菜单时无法滚动回顶部但是当我删除侧面菜单时,$ ionicScrollDelegate似乎工作正常并且它可以滚动回顶部 .

工作代码 - 没有离子侧菜单

<ion-view>
                <ion-header-bar class="bar-positive">
                    <button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left">
                        <i class="icon ion-navicon"></i>
                    </button>

                    <h1 class="title">Details </h1>


                </ion-header-bar>
                <ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
                    <a href="#" ng-click="loadMore(data)">Load More</a>
                    <ion-list can-swipe="listCanSwipe">

                        <ion-item ng-repeat="data in tempData |limitTo: limit"
                                  item="data"
                                  href="#/expenseDetail/{{data.id}}"
                                  class="item-remove-animate">

                            Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}
<ion-option-button class="button-assertive" ng-click="showPopup(data)"> Delete </ion-option-button> <ion-option-button class="button-calm" ng-click="edit(data)" ng-disabled="data.status!= 'Draft'"> Edit </ion-option-button> </ion-item> </ion-list> <button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button> </ion-content> <ion-view>

不工作 - 有侧面菜单

<ion-view>
    <ion-side-menus>
        <ion-side-menu-content>
            <ion-header-bar class="bar-positive">
                <button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left">
                    <i class="icon ion-navicon"></i>
                </button>

                <h1 class="title">Expenses Details</h1>

                <a class="button button-icon ion-plus-round" href="#/addExpensesForm"></a>

            </ion-header-bar>
            <ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
                <a href="#" ng-click="loadMore(data)">Load More</a>
                <ion-list can-swipe="listCanSwipe">

                    <ion-item ng-repeat="data in tempData |limitTo: limit"
                              item="data"
                              href="#/expenseDetail/{{data.id}}"
                              class="item-remove-animate">


                        Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}
<ion-option-button class="button-assertive" ng-click="showPopup(data)"> Delete </ion-option-button> <ion-option-button class="button-calm" ng-click="edit(data)" ng-disabled="data.status!= 'Draft'"> Edit </ion-option-button> </ion-item> </ion-list> <button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button> </ion-content> </ion-side-menu-content> <ion-side-menu side="left"> <header class="bar bar-header bar-assertive"> <h1 class="title">Menu</h1> </header> <ion-list> <ul class="list"> <a ui-sref="tabs.home" class="item">Home</a> <a ui-sref="about" class="item">About</a> <a ui-sref="tabs.setting" class="item">Settings</a> </ul> </ion-side-menu> </ion-side-menus> </ion-view>

在我的控制器中,我有

$scope.scrollListToTop = function () {
        var result = $ionicScrollDelegate.$getByHandle('mainContent').getScrollPosition();

        alert('Result:' + result.top + " " + result.left);
        //$ionicScrollDelegate._instances[2].scrollTop();
    }

1 回答

相关问题