將新的md-list-item添加到md-list時滾動到底部Angular Material

我正在實現使用Angular和Angular Material進行聊天，並且我堅持讓md-list滾動到底部，當我修改消息數組中包含新消息的模型。嘗試了很多事情，但沒有成功watchCollection正在工作，但我似乎找不到方法滾動到最底層的MD列表。也許它的東西與材料將新的md-list-item添加到md-list時滾動到底部Angular Material

HTML：

<md-content flex layout-padding> 
     <md-list flex scroll-bottom="vm.messages"> 
      <md-list-item class="md-3-line" ng-repeat="msg in vm.messages"> 
       <!--<img ng-src="{{user.userAvatar}}" class="md-avatar" alt="{{user.userName}} Avatar"/>--> 
       <div class="md-list-item-text" layout="row"> 
        <div flex="15"></div> 
        <div flex="70" layout="column"> 
         <h3>{{msg.text}}</h3> 
        </div> 
        <div flex></div> 
       </div> 
      </md-list-item> 
     </md-list> 
    </md-content>

角指令：

angular.module('chat').directive('scrollBottom', function ($timeout) { 
    return { 
     restrict: 'A', 
     scope: { 
      scrollBottom: "<" 
     }, 
     link: function (scope, element) { 
      scope.$watchCollection('scrollBottom', function (newValue) { 
       if (newValue) 
       { 
        element.scrollTop = element.scrollHeight; 
       } 
      }); 
     } 
    } 
})

來源

2017-01-11 Georgi Antonov

也許[這個問題]（http://stackoverflow.com/questions/40160490/angularjs-scroll-to-bottom-of-div）可以幫助。 – troig

你做到了，現在它工作移動到MD內容做了伎倆 –

如本人留言評論，並採取這種SO question作爲參考，這裏的關鍵是增加你的scrollBottom指令md-content元素而不是md-list。

來源

2017-01-11 11:50:15 troig

將新的md-list-item添加到md-list時滾動到底部Angular Material

回答

相關問題