如何滚动到底部或将焦点移到底部成角度？

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