Défilement automatique vers le bas avec ng-repeat dans Ionic

Question

J'ai un problème qui devient un vrai cauchemar. Je construis une application de chat mobile avec Ionic, Angular et Firebase. L'échange de messages fonctionne bien, mais j'ai un problème avec le défilement automatique faire bas lorsque les nouveaux messages reçus, j'essaie d'utiliser $ ionicScrollDelegate, directive Scroll-colle, fonction Jquery et rien ne fonctionne.

page le chat

  <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> 

et un morceau de 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

Vous pouvez utiliser.

$ionicScrollDelegate.scrollBottom(true); 

Example on codepen