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

你可以使用。

index.html

Example on codepen

Answer 2

一年后，我找到了一个解决方案：在角度模板中分离我的应用程序，最后使用scrollglue工作。

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

2 个答案: