javascript - 如何以 Angular 滚动到底部或将焦点移动到底部？

Question

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

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

这是您的解决方案。它对我有用。

模板

<div data-ng-controller="TestController">
    <button data-ng-click="AddNewItem()">Add New Item</button>
    <div class="heightClass" data-dr-scroll-to-bottom>
        <div data-ng-repeat="divItem in divList track by $index">
            {{divItem}}
        </div>
    </div>
</div>

Controller

app.controller("TestController", ["$scope", function ($scope) {

    $scope.divList = [1, 2];

    $scope.AddNewItem = function () {
        $scope.divList.push(3);
    };

}]);

指令您有两个选择。

1. listen to DOMNodeInserted(这已被弃用。所以不要使用它。了解更多信息 Listening to events such as adding new elements in JavaScript 。为了方便起见，我添加了代码。但不要使用此代码。使用 Option 2).

   app.directive("drScrollToBottom", function() {

   var linkFunction = 函数(范围, iElement, iAttrs) { iElement.bind("DOMNodeInserted", function() { console.log(iElement.prop("scrollHeight")); iElement.scrollTop(iElement.prop("scrollHeight")); }); };

   返回{ 限制:“A”， 链接:链接功能 }});

2. 使用arrive.js(可以在此处找到https://github.com/uzairfarooq/arrive/)

   app.directive("drScrollToBottom", function () {

   var linkFunction = function (scope, iElement, iAttrs) {
       iElement.arrive("div", function () {
           console.log(iElement.prop("scrollHeight"));
           iElement.scrollTop(iElement.prop("scrollHeight"));
       });
   };
   
   return {
       restrict: "A",
       link: linkFunction
   }    
   

   });