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

Question

我遇到了一个真正的噩梦问题。我使用 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();

}

Answer 1

你可以使用。

$ionicScrollDelegate.scrollBottom(true);

Example on codepen