javascript - 如何使用angular js滚动div的底部

Question

我有一个 div，我在其中添加了元素。每当在 div 中添加元素时，我想滚动到 div 的底部。我知道如何在 jquery 中执行。但我不知道如何使用 angular js 滚动我知道使用 jquery Scroll to bottom of div?

testCaseContainer 是 div 的 id。

var elem = document.getElementById('testCaseContainer'); // just to
                                                                    // scroll down
                                                                    // the line
        elem.scrollTop = elem.scrollHeight;

我想知道如何使用 angular ？

http://plnkr.co/edit/M8tCL8Szc3h3FatFLycG?p=preview

我在 div 容器中添加了 css 以便它滚动。

.heightClass{
  height:100px;
  overflow :auto;
}

添加项目时如何将焦点移至下方..请发布您的答案..

Answer 1

您可以创建自己的滚动指令来监视集合，并在它发生变化时设置滚动位置:

app.directive('scroll', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      scope.$watchCollection(attr.scroll, function(newVal) {
        $timeout(function() {
         element[0].scrollTop = element[0].scrollHeight;
        });
      });
    }
  }
});

HTML

<div class="heightClass" scroll="studentDetail">

注意:需要 $timeout 来确保在呈现 View 后设置滚动位置。

Demo Plunker