Angular: MacOSX scrolling

http://angularjs.org/

by Ztyx

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="https://raw.github.com/jamesflorentino/nanoScrollerJS/master/bin/css/nanoscroller.css">
<script src="https://raw.github.com/jamesflorentino/nanoScrollerJS/master/bin/javascripts/jquery.nanoscroller.js"></script>
<div ng-controller="MyCtrl">
    <div id="about" class="nano" my-directive="{height: '250px',width: '250px'}">
        <div class="content">
            <p ng-repeat="item in items">{{item}}</p>
        </div>
    </div>
    <div>
        <button data-ng-click="append()">Append</button>
    </div>
</div>

CSS

.nano {
    background: #bba;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
.nano .content {
    padding: 10px;
}
.nano .pane {
    background: #888;
}
.nano .slider {
    background: #111;
}

JavaScript

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

myApp.directive('myDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            jQuery(".nano").nanoScroller();
        }
    };
});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.items = [];
    var counter = 0;
    for (var i = 0; i < 50; i++) {
        $scope.items.push('Item ' + (counter++));
    }
    $scope.append = function () {
        for (var i = 0; i < 5; i++) {
            $scope.items.push('Item ' + (counter++));
        }
    };
}