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

现在在ng-repeat完成之前渲染控制器代码已经运行，这是我不想要的。有没有办法暂停＆＃34;滚动到＆＃34;功能，直到一切都正确呈现。

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

如果没有将延迟指定为第二个参数，则在执行当前执行的线程之后立即调用传递的函数。

您还可以使用angular提供的$ timeout服务（setTimeout周围的包装），但这并没有给您带来任何好处。它只触发另一个不必要的摘要周期。

Answer 2

您可以向 ng-repeat 部分添加自定义指令，例如此＆amp;像这个

一样向该指令添加滚动选项

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

在angular渲染元素后滚动到列表项

2 个答案: