$ionic Scroll Delegate 在 ion-side-menu angular js 中不起作用答案

【问题标题】：$ionicScrollDelegate not working in ion-side-menu angualrjs$ionic Scroll Delegate 在 ion-side-menu angular js 中不起作用
【发布时间】：2015-07-22 05:44:24
【问题描述】：

我目前正在我的移动应用程序中处理 $ionicScrollDelegate。我的目标是当用户单击标题栏时，它会自动滚动到顶部。我现在遇到的问题是当我在代码中包含 ion-side-menu 时，$ionicScrollDelegate 无法向后滚动，我创建了一个按钮它返回它们的位置，但不能向后滚动。我试图弄清楚为什么当我包含侧边菜单时 $ionicScrollDelegate 无法滚动回顶部，但是当我删除侧边菜单时，$ionicScrollDelegate 似乎工作正常并且它可以滚动回顶部。

工作代码 - 没有 ion-side-menu

 <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"}}<br />

                            <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"}}<br />
                 <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();
    }

【问题讨论】：

嗨@Big我只是想看看你对我在下面发布的答案的看法。为你工作？
我也有同样的问题（还是没找到解决办法

标签： angularjs ionic

【解决方案1】：

这可能与您的标记结构有关。

下面的两个链接都建议ion-side-menu-content 应该包含一个ion-nav-bar，然后是一个ion-nav-view

https://github.com/driftyco/ionic-starter-sidemenu/blob/master/templates/menu.html 和 http://mcgivery.com/understanding-ionics-side-menu/

切换它并将你的离子含量放在那里可能会让你重新控制。

如果没有，请给我们一个 codepen 或类似的东西。

【讨论】：