Angular JS resizable div directive

This question is old, but for anybody looking for a solution, I built a simple directive to handle this, for vertical and horizontal resizers.

Take a look at the Plunker

angular.module('mc.resizer', []).directive('resizer', function($document) {    return function($scope, $element, $attrs) {        $element.on('mousedown', function(event) {            event.preventDefault();            $document.on('mousemove', mousemove);            $document.on('mouseup', mouseup);        });        function mousemove(event) {            if ($attrs.resizer == 'vertical') {                // Handle vertical resizer                var x = event.pageX;                if ($attrs.resizerMax && x > $attrs.resizerMax) {                    x = parseInt($attrs.resizerMax);                }                $element.css({                    left: x + 'px'                });                $($attrs.resizerLeft).css({                    width: x + 'px'                });                $($attrs.resizerRight).css({                    left: (x + parseInt($attrs.resizerWidth)) + 'px'                });            } else {                // Handle horizontal resizer                var y = window.innerHeight - event.pageY;                $element.css({                    bottom: y + 'px'                });                $($attrs.resizerTop).css({                    bottom: (y + parseInt($attrs.resizerHeight)) + 'px'                });                $($attrs.resizerBottom).css({                    height: y + 'px'                });            }        }        function mouseup() {            $document.unbind('mousemove', mousemove);            $document.unbind('mouseup', mouseup);        }    };});

I know I'm a bit late to the party, but I found this and needed my own solution. If you're looking for a directive that works with flexbox, and doesn't use jquery. I threw one together here:

http://codepen.io/Reklino/full/raRaXq/

Just declare which directions you want the element to be resizable from, and whether or not you're using flexbox (defaults to false).

<section resizable r-directions="['right', 'bottom']" r-flex="true">

For the needs of my project i added support of minimum values, so that panels can keep some width or height - (here is the gist) - Github

Also, i created Github repo, where i added support for panels being located right of main page axis and support of minimum/maximum values. It's in example stage now, but i'm willing to turn it into a full-weight Angular directive