Using a directive to make an element scrollable in AngularJS

Question

I've created a directive that makes an html scrollable (using Malihu scroller)

myApp.directive("scrollable", [function () {
    return function(scope, elm) {
        elm.mCustomScrollbar({
            autoHideScrollbar: false,
            theme: 'dark',
            advanced:{
                updateOnContentResize: true
            }
        });
    };
}]);

Here is the live example on Plunker : http://plnkr.co/edit/wm9qHn?p=preview

Is it stupid to use a directive to do this? Is there a better / more fancy way to make an element scrollable in Angular?

Answer 1

This is how Angular defines a directive:

...directives are markers on a DOM element... that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Your example sounds like an ideal use case for a directive, since you're adding functionality to an element.