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