Javascript 渲染元素后滚动到列表项

我想滚动到聊天框中的最后一条消息。所以我是这样做的-

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完成渲染之前，运行控制器代码，这是我不想要的。有没有办法暂停“滚动到”功能，直到所有内容都正确呈现

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>

面对
{{message.what}
{{message.whence}日期：'yyyy:mm:dd hh:mm:ss'}
面对

---

谢谢

您可以使用超时：

setTimeout(function() {
    // Your delayed code goes here
});

在不将延迟指定为第二个参数的情况下，传递的函数将在当前执行线程完成页面呈现后立即调用

---

您也可以使用angular提供的$

timeout

服务（一个围绕

setTimeout

的包装器），但它并没有给您带来任何好处。它只会触发另一个不必要的摘要循环。

您可以使用超时：

setTimeout(function() {
    // Your delayed code goes here
});

在不将延迟指定为第二个参数的情况下，传递的函数将在当前执行线程完成页面呈现后立即调用

---

您也可以使用angular提供的$

timeout

服务（一个围绕

setTimeout

的包装器），但它并没有给您带来任何好处。它只会触发另一个不必要的摘要循环。

您可以向

ng repeat

部分添加自定义指令，如下所示&向该指令添加滚动选项

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

面对
{{message.what}
{{message.whence}日期：'yyyy:mm:dd hh:mm:ss'}
面对
指令（'myRepeatDirective'，函数（）{
返回函数（范围、元素、属性）{
如果（范围$last）{
animate（{scrollTop:elt.offset（）.top}，“slow”）；
}
};
})

您可以向

ng repeat

部分添加自定义指令，如下所示&向该指令添加滚动选项

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

面对
{{message.what}
{{message.whence}日期：'yyyy:mm:dd hh:mm:ss'}
面对
指令（'myRepeatDirective'，函数（）{
返回函数（范围、元素、属性）{
如果（范围$last）{
animate（{scrollTop:elt.offset（）.top}，“slow”）；
}
};
})

这很好，但是动画功能不起作用，你能不能提出一些建议？关于你的评论，

$timeout

在这里是不必要的，没错，但是它有助于测试，因为你可以很容易地模拟它。这很好，但是动画功能不起作用，你能给我一些建议吗？关于你的评论，

$timeout

在这里是不必要的，没错，但它有助于测试，因为你可以很容易地模拟它。是的，我试过了，它奏效了。但是动画功能不起作用，你能帮助我如何使用angularjs滚动到动画吗？我没有jquery，只有angularjs和其他angularjs支持libs@codeomnitrix你可以查看这篇文章，但我建议你使用jQuery，因为它可以在这种情况下节省很多时间。是的，我试过了，它奏效了。但是动画功能不起作用，你能帮助我如何使用angularjs滚动到动画吗？我没有jquery，只有angularjs和其他angularjs支持libs@codeomnitrix您可以查看这篇文章，但我建议您使用jQuery，因为它将为此类情况节省大量时间。