Angular Pretty Scrolling

by andyjmeyers

HTML

<script src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/mwheelIntent.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<div class='container' ng-controller='ctrl'>
    <div class='scroll-pane' scroll-pane>
        <ol>
            <li ng-repeat='obj in objects'>{{obj}}</li>
           
        </ol>
    </div>
    <button ng-click='resetDemo()'>Reset</button>
</div>

CSS

.container{
    height: 100px;
    
}

.scroll-pane
{
	width: 200px;
	height: 100%;
	overflow: auto;
}

JavaScript

angular.module('demo', []).controller('ctrl' ,['$scope', '$timeout', function ($scope, $timeout){
    
    var objects = getObjects();
    
    function getObjects(){
        return ['Sun', 'Mercury', 'Venus', 'Earth', 'Ceres', 'Jupiter', 'Saturn',
                   'Uranus', 'Neptune', 'Pluto', 'Haumea', 'Makemake', 'Eris'];
    }
    
    $scope.objects = [];
    
    $scope.resetDemo = function resetDemo(){
        while ($scope.objects.length > 0){
            $scope.objects.pop();
        }
        objects = getObjects();
        $timeout(addToList, 1000);
    }
    
    function addToList(){
        
        $scope.objects.push(objects.shift());
        $scope.$broadcast('refresh', {});
        if (objects.length > 0){
            $timeout(addToList, 1000);
        }
    }
    
    $timeout(addToList, 1000);
    
}]).directive('scrollPane', function(){
    function link(scope, element, attr){
        
        var $element = $(element),
            api;
        
        // element.jScrollPane();
        //In real world Angular would replace jQuery
        $element.jScrollPane();
        api = $element.data('jsp');
        
        scope.$on('refresh', function onRefresh(event, args){
            api.reinitialise();
        });
        
    }
    
    return {
        restrict: 'A',
        link: link
    };
});

//$(function()
//{
//	$('.scroll-pane').jScrollPane();
//});