在 Ionic 中使用 ng-repeat 自动滚动到底部答案

【问题标题】：Auto scroll to bottom with ng-repeat in Ionic在 Ionic 中使用 ng-repeat 自动滚动到底部
【发布时间】：2016-11-06 19:16:42
【问题描述】：

我遇到了一个真正的噩梦。我用 Ionic、Angular 和 Firebase 构建了一个移动聊天应用程序。消息交换运行良好，但收到新消息时自动滚动底部出现问题，我尝试使用 $ionicScrollDelegate、滚动胶水指令、Jquery 函数，但没有任何效果。

页面聊天

            <div ng-controller="ChatController as chatCtrl" id="chats_page" class="upage-content vertical-col left hidden has-subheader">
                        <div class="bar bar-subheader subheader-chat">
                          <h2 class="title">{{chatCtrl.status}}</h2>
                        </div>
                <div class="" data-uib="layout/row" data-ver="0"  id="chatBox">


                            <ion-content id="autoscroll" class="widget uib_w_92 d-margins topbar" data-uib="ionic/list" data-ver="0" delegate-handle="mainScroll">
                                <ion-list scroll-glue>
                                <ion-item ng-repeat="msg in chatCtrl.messages" class="item widget uib_w_93 chat-cliente item-text-wrap" data-uib="ionic/list_item" data-ver="0" ng-class="chatCtrl.getRole(msg.role)">{{msg.text}}<a class="chat-time">{{msg.time}}</a>
                                </ion-item>
                            </ion-list>
                            </ion-content>


                </div>


                <div class="bar bar-footer footer-chat" >
                    <i class="placeholder-icon "></i>
                    <textarea type="text" name="msg" placeholder="Digite sua mensagem..." class="chat-text" ng-disabled="chatCtrl.msgText()" ng-model="myMsg" ></textarea>
                    <button class="button ion-paper-airplane btn-chat-send" ng-click="chatCtrl.sendMsg(myMsg)" ng-disabled="chatCtrl.msgText()" id='btn_send_chat'></button>
                </div>

            </div>

还有一块 ChatController

angular.module('myApp')
.controller("ChatController", ['User','FireBaseApp','$firebase','$ionicLoading','$timeout','$ionicPlatform','$location','$ionicHistory','$timeout','$ionicPopup','$ionicScrollDelegate','$scope',function(User, FireBaseApp ,$firebase, $ionicLoading,$timeout,$ionicPlatform,$location,$ionicHistory,$timeout,$ionicPopup,$ionicScrollDelegate,$scope){

    var self = this;




    ... pieces of code ...


 self.sendMsg = function(msg){
          $scope.myMsg = null;

          $ionicScrollDelegate.scrollBottom();

}

【问题讨论】：

嘿！你终于找到解决办法了吗？

标签： javascript angularjs ionic-framework intel intel-xdk

【解决方案1】：

你可以使用。

$ionicScrollDelegate.scrollBottom(true);

Example on codepen

【讨论】：

【解决方案2】：

一年后，我找到了一个解决方案：将我的应用程序分离到 Angular 模板中，最后滚动胶可以工作。

【讨论】：