Директива об изменении размера (AngularJS + JQuery)

Question

Надеюсь, у кого-то есть ответ на создание angularJS Директивы для изменения размера div с использованием местоположения селектора для изменения размера выбранного div.

У меня есть это, и оно работает для документа и окна, не очень хорошо, когда другие элементыпоказано на рисунке.

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 = $(document).width() - event.clientX;

            $($attrs.resizerRight).css({
                width: x + 'px'
            });

            $($attrs.resizerLeft).css({
                width: ($(document).width() - x) + 'px'
            });

        }
    }

    function mouseup() {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
    }
};

});

Затем в HTML я добавляю элемент как таковой

<!--Resize Article Element-->
                          <div id="articleResizer"
                        resizer="vertical"
                        resizer-width="6"
                        resizer-right="#singleArticle"
                      resizer-left="#listViewId"
                        resizer-max="90%">
                    </div>

Любые предложения будут потрясающими !!