如何使用AngularJS滚动到div的底部

Question

如何使用AngularJS滚动到div的底部

javascriptjqueryangularjsangularjs-directive

5

我有一个 div，其中添加了元素。每当在 div 中添加元素时，我希望滚动到 div 的底部。我知道如何在 jQuery 中实现它。但是我不知道如何使用 AngularJS 滚动。

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

当添加项目时如何将焦点移动到下面..请发布您的答案..

- Shruti

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pixelbits · Accepted Answer

你可以创建自己的滚动指令，监视一个集合，当它发生改变时，设置滚动位置：

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

超文本标记语言

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

注意：需要使用$timeout确保在视图呈现后设置滚动位置。演示 Plunker