Rectangle 27 0

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

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);
        }
    };
});

For some reason the preview plunker link is not loading. I updated the answer with a working link plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview

angularjs - Angular JS resizable div directive - Stack Overflow

angularjs controller resize scope directive
Rectangle 27 0

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:

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">

angularjs - Angular JS resizable div directive - Stack Overflow

angularjs controller resize scope directive
Rectangle 27 0

BTW, to enhance Mario's answer. We can use angular.element(document.querySelector(#id)) then we do not need to include JQuery.

var myEl = angular.element( document.querySelector( '#some-id' ) );

angularjs - Angular JS resizable div directive - Stack Overflow

angularjs controller resize scope directive
Rectangle 27 0

This does not completely answer the question, but changing scope: true solved the isolate scope problem. In particular, in my html I have:

<div ng-controller="WorkspaceCtrl">
  <div class="workspace" resize="full" ng-style="resizeStyle()">
    <div class="leftcol" resize="left" ng-style="resizeStyle()">
      <ul class="filelist">
        <li ng-repeat="file in files" id={{file.id}} ng-bind=file.name></li>
      </ul>
      <div contenteditable="true" ng-model="content" resize="editor" ng-style="resizeStyle()">
        Talk to me
      </div>
    </div>
</div>

and ng-repeat="file in files" still has access to the array $scope.files defined in the controller WorkspaceCtrl. So scope: {} cuts off the scope of the directive from the scope of the parent controller, whereas scope: true simply creates a new scope for each instance of the directive AND each instance of the directive, along with its children, retains access to the parent scope.

I have not yet implemented the draggable bar which resizes these divs, but will report back when I do so.

No, sorry. It's simple to make divs resize on window resize. I've become distracted with other things and haven't tried to make the divs themselves resizable. However, I'm sure that it would be accomplished by using draggable "shims" which lie inbetween the divs. Also, make sure you don't isolate the scope for any directives you wish to resize this way.

Since I asked this yesterday, I found a fairly decent solution to the problem. Check out this forked version of jQuery Splitter: github.com/e1ven/jQuery-Splitter. To get it to work with jQuery 1.9+, you need to reinstate jQuery.browser (I use this code). Hook that up with a linking function and you should be good to go.

angularjs - Angular JS resizable div directive - Stack Overflow

angularjs controller resize scope directive
Rectangle 27 0

The resizable directive is incorrect. The ng-transclude directive must be applied to the innermost element, because its content will be discarded and replaced with transcluded content.

You should surround tbox directive template with (corrected) resizable element directive. I dont' know what editoptions attribute does, but if it's also a directive, then it also shouldn't have a template.

appModule.directive('resizable', function($compile, $document) {
    return {
        restrict: "E",
        template: '<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude></div>',
        transclude: true,
        replace: true,
        //...

appModule.directive('tbox', function($document) {
    return {
        restrict: "E",
        template: '<resizable><div class="editbox" editoptions>{{tb.text}}</div></resizable>',
        replace: true,
        //...
<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude>
    <div class="editbox" editoptions>{{tb.text}}</div>
</div>

Hi Adam, essentially my aim is to create smaller manageable directives and combine them into larger directives. Regarding the ng-transclude, what I really wanna do is to wrap the template around the current existing dom element that has the resizable attribute. What would be the remedy?

javascript - angular: multiple directives asking for templates on - St...

javascript angularjs angularjs-directive