CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-directive
Shruti
Shruti

Reputation: 1574

how to scroll bottom of div using angular js

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 I know using jquery Scroll to bottom of div?

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..

Upvotes: 5

Views: 12728

Answers (1)

Michael Kang
Michael Kang

Reputation: 52837

You could create your own scroll directive that watches a collection, and when it changes, sets the scroll position:

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">

Note: $timeout is needed to ensure that the scroll position is set after the view is rendered.

Demo Plunker

Upvotes: 19

Related Questions