Question

我正在使用Angular和Angular Material实现聊天，当我使用messages数组中的新消息修改模型时，我坚持使md-list滚动到最底层。试过很多事情，但没有成功watchCollection正在起作用，但我似乎找不到滚动到最底层的md-list的方法。也许它与物质的东西

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

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;
                }
            });
        }
    }
})

Answer 1

我在评论中发帖，并以此SO question作为参考，这里的关键是将md-content指令添加到md-list元素而不是angular.directive('scrollMagic',function(){ return { 'restrict':'A', 'scope':{ 'scrollMagicController':'=' } 'link':function(scope, element){ new ScrollMagic.Scene({ triggerElement: element, duration: '50%' }) .setPin(element) .addTo(scope.scrollMagicController); } } });。

将新的md-list-item添加到md-list Angular Material

1 个答案: