How to call a directive inside another directive

This is my first question on StackOverflow.

I am working with AngularJS and I am creating reusable boundingBox, Resizable and Draggable directives.

The idea behind the BoundingBox directive is that it should add Draggable and Resizable directives to the SAME DOM element (if they haven't already).

angular.module('WYSIRWYG.BoundingBox', [])
.directive('boundingBox', [function() {

return {
    restrict: 'A',
    transclude: false,
    priority: -1000,

    compile: function($element, $attrs) {

        console.log($element.html());
        return {
            pre: function($scope, $element, $attrs) {

            },

            post: function($scope, $element) {
                $element
                .resizable({
                    handles: $attrs.bbHandles
                });
            }
        };
    }
};
}]);

      

and for the draggable directive:

angular.module('WYSIRWYG.Draggable', [])
.directive('draggable', [function() {

return {
    restrict: 'A',
    transclude: false,
    priority: -1000,

    compile: function($element, $attrs) {

        return {
            pre: function($scope, $element, $attrs) {

            },

            post: function($scope, $element) {
                $element
                .draggable({
                    delay: $attrs.dragDelay
                });
            }
        };
    }
};
}]);

      

and the DOM:

<div bounding-box bb-handles="n, e, s, w, ne, se, sw, nw" style="background:red; width: 100px; height: 100px; display: block; position: absolute; top: 50px; left: 100px;">div content</div>

      

Please note that I did not add any Resizable or Draggable attribute directives to the div, so I hope the BoundingBox does it like this.

The problem is, I don't know how to get AngularJS to add these directives to the current DOM element. I tried compiling $ but it gives an infinite loop as angular tries to compile the BoundingBox over and over ...

+3


source to share


1 answer


One solution does use $compile

in yours boundingBox

, but only after you removed the attribute bounding-box

so that it doesn't start the loop.



element.removeAttribute('bouding-box');
element.setAttribute('draggable');
$compile(element)(scope);

      

0


source







All Articles