current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

share|improve this question

1 Answer 1

up vote 2 down vote

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

share|improve this answer
    
wait I will tell you –  user2535959 2 days ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.