how to scroll to bottom or move focus to bottom in angular?

Question

I have a div in which I added element .I want to scroll to bottom of the div whenever element added in div.I know how to do in in jquery .But I did not know how to scroll using angular js

testCaseContainer is id of div .

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

I want to know how it is possible using angular ?

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

I added css in div container so that it scroll .

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

how to move focus below when item is added ..please post your answer..

Answer 1

Here is your solution. It works for me .

Template

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

}]);

Directive You have two options.

1. listen to DOMNodeInserted(This is deprecated. so don't you use it. learn more about it Listening to events such as adding new elements in JavaScript. For sake for convenience I have added the code . But don't use this code. Use Option 2).

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

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

   return { restrict: "A", link: linkFunction } });

2. use arrive.js(can be found here 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
   }    
   

   });

Answer 2

below is the directive to scroll to bottom of page

csapp.directive('csScrollTop', ["$window", function ($window) {
    var linkFunction = function (scope) {
        scope.$on("$locationChangeSuccess", function () {
            $window.scrollTo(0, document.body.scrollHeight);
            //$("html, body").animate({ scrollTop: 0 }, "fast");
        });
    };

    return {
        restrict: 'E',
        link: linkFunction
    };
}]);