javascript - 在 Angular 呈现元素后滚动到列表项

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 完成渲染之前， Controller 代码已运行，这是我不想要的。有什么方法可以暂停“滚动到”功能，直到一切都正确呈现。

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 的包装器)，但它不会给您带来任何好处。它只会触发另一个不必要的摘要周期。