javascript - $timeout scrollTop 指令在 angularJS 中不起作用

Question

我正在尝试用 angularJS 进行一次简短的聊天。我使用 div 来显示消息，并且希望在页面加载时向下滚动我的 div。我创建了一个指令来做到这一点。

我的 HTML:

<div id="myChat" style="height: 500px; overflow-y: scroll;border: 1px solid #ccc;border-radius: 4px;" scroll-bottom>
    <div ng-repeat='message in chatMessagesArray'><span style="color:green">aaa</span><span> bbb</span></div>
</div>

我的 Angular Directive(指令):

.directive('scrollBottom', ['$timeout' , function ($timeout) {
  return {
    link: function (scope, element) {
      $timeout(function () {
        console.log($(element).scrollTop())
        $(element).scrollTop($(element)[0].scrollHeight)
      })
    }
  }
}

在控制台上，我看到 console.log() 的输出为 0，所以我知道该指令已触发，但第二行尚未完成...您知道可能出了什么问题吗？在 MAC OS X + Chrome/FF 上测试

Answer 1

试试这个。这里我添加了1秒的超时。页面加载后立即滚动，只需删除毫秒部分

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.chatMessagesArray = ["a", "b", "c", "d", "e", "f"];
});
app.directive('scrollBottom', ['$timeout',
  function($timeout) {
    return {
      link: function(scope, element) {
        $timeout(function() {
          $(element).scrollTop($(element)[0].scrollHeight)
        })
      }
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div id="myChat" style="height: 500px; overflow-y: scroll;border: 1px solid #ccc;border-radius: 4px;" scroll-bottom>
    <div ng-repeat='message in chatMessagesArray'> <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
      <span style="color:green">aaa</span>
      <br>
      <span> bbb</span>
      <br>
    </div>
  </div>
</div>