$ 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> 

我的角度指令：

.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>