прокрутите до элемента списка после того, как угловой обработал элемент

Question

Я хочу прокрутить до последнего сообщения в окне чата. Поэтому я делаю это как -

akiRepair.controller("chatCtrl", ['$scope', function($scope){ 
... 
    var size = $scope.messages.length; 
    var t = document.querySelector("#chat-box"); 
     console.log(t); 
     var elt = angular.element(t.querySelector("md-list-item")[size-1]); 

     angular.element("#chat-box").animate({scrollTop: elt.offset().top}, "slow"); 

Теперь перед нг-повтор завершается оказывает код контроллера запускается, который я не хочу. есть ли способ приостановить функцию «прокрутки до», пока все не будет обработано должным образом.

HTML код -

<md-list layout-padding id="chat-box"> 
     <md-list-item class="md-3-line" ng-repeat="message in messages"> 
      <i class="md-avatar material-icons" 
      ng-if="message.sender">face</i> 
      <div class="md-list-item-text" 
      ng-class="message.sender?'left-align':'right-align'"> 
      <h3>{{message.what}}</h3> 
      <h4 class="faded">{{message.whence | date: 'yyyy:mm:dd hh:mm:ss'}}</h4> 
      </div> 
      <i class="md-avatar material-icons" 
      ng-if="!message.sender">face</i> 
      <md-divider ng-if="!$last"></md-divider> 
     </md-list-item> 

Благодаря

Answer 1

Вы можете просто использовать тайм-аут:

setTimeout(function() { 
    // Your delayed code goes here 
}); 

Без указания задержки в качестве второго параметра, переданная функция будет вызвана сразу же после того, как текущая нить исполнения, заканчивающаяся рендерингом страницы.

Вы также можете воспользоваться услугой $ timeout, предлагаемой угловой (обертка вокруг setTimeout), но она не дает вам никаких преимуществ здесь. Это только запускает другой цикл дайджеста, который не является необходимым.

Answer 2

Вы можете добавить пользовательскую директиву к вашим ng-repeat части как эта & надстройки варианты прокрутки в эту директиву, как этого

<md-list-item class="md-3-line" ng-repeat="message in messages" my-repeat-directive> 
    <i class="md-avatar material-icons" 
     ng-if="message.sender">face</i> 
    <div class="md-list-item-text" 
     ng-class="message.sender?'left-align':'right-align'"> 
     <h3>{{message.what}}</h3> 
     <h4 class="faded">{{message.whence | date: 'yyyy:mm:dd hh:mm:ss'}}</h4> 
    </div> 
    <i class="md-avatar material-icons" 
     ng-if="!message.sender">face</i> 
    <md-divider ng-if="!$last"></md-divider> 
</md-list-item> 

akiRepair.directive('myRepeatDirective', function() { 
    return function(scope, element, attrs) { 
     if (scope.$last) { 
      angular.element("#chat-box").animate({scrollTop: elt.offset().top}, "slow"); 
     } 
    }; 
})