scroll bottom directive

by Mark Coleman

HTML

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <button ng-click="add()" scroll-bottom="bottom">Add</button>
    <ul id="bottom">
        <li ng-repeat="item in list">{{item}}</li>
    </ul>
</div>

CSS

ul {
    height: 150px;
    overflow: scroll;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive("scrollBottom", function(){
    return {
        link: function(scope, element, attr){
            var $id= $("#" + attr.scrollBottom);
            $(element).on("click", function(){
                $id.scrollTop($id[0].scrollHeight);
            });
        }
    }
});

function MyCtrl($scope) {
    $scope.list = ["item 1", "item 2","item 3","item 4","item 5"];
    $scope.add = function() {
        $scope.list.push("new item");
    }
}