Jquery Slim Scroll и Angular JS, Как исправить прокрутку внизу div?

Question

Я пытаюсь создать вид веб-приложения для чата.Для UX я хочу исправить slimscroll нижней части div.

Для этого я написал свой код в HTML,

<div class="ibox-content" slim-scroll>
     <div ng-repeat="chat in chats track by $index">
         <p>{{chat}}</p>
     </div>
</div>

, и объявил директиву angularjs следующим образом.

function slimScroll($timeout){
   return {
       restrict: 'A',
       scope: {
           boxHeight: '@'
       },
       link: function(scope, element) {
           $timeout(function(){
               element.slimscroll({
                   height: '75vh',
                   railOpacity: 0.9,
                   scrollTo: element.scrollHeight,
                   start: 'bottom'
               });
           });
       }
   };
}

Но я думаю, scrollTo: element.scrollHeight, не работает.Что я должен делать?Есть идея, чтобы это исправить ??

Answer 1

Я не думаю, что ваш подход сработает - прочитав документацию для Jquery Slim Scroll, я думаю, вам нужно будет звонить element.slimscroll каждый раз, когда вы получаете новое сообщение чата, а не тольконачальная загрузка.

Один из способов сделать это - разрешить директиве slim scroll принимать массив.Вы можете $ наблюдать за этим массивом, чтобы увидеть, изменится ли его длина, затем вы можете вызвать scrollTo для элемента.

Answer 2

Элемент возвращает объект angular.element.Вам нужно element[0], чтобы получить нативный элемент.

function slimScroll($timeout){
   return {
       restrict: 'A',
       scope: {
           boxHeight: '@'
       },
       link: function(scope, element) {
           $timeout(function(){
               element.slimscroll({
                   height: '75vh',
                   railOpacity: 0.9,
                   scrollTo: element[0].scrollHeight,
                   start: 'bottom'
               });
           });
       }
   };
}