将新的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

回答

相关问题