Question

这是我在StackOverflow中的第一个问题。

我正在使用AngularJS，并且我正在创建可重复使用的boundingBox，Resizable和Draggable指令。

BoundingBox指令的想法是它应该将Draggable和Resizable指令附加到 SAME DOM元素（如果它们还没有）。

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

和draggable指令：

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

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

请注意，我没有向div添加Resizable或Draggable属性指令，所以我希望BoundingBox这样做。

问题是我不知道如何使AngularJS将此指令附加到当前DOM元素。我尝试过$ compile但是它给出了无限循环，因为angular尝试反复编译BoundingBox ......

Answer 1

确实有一个解决方案是在$compile中使用boundingBox，但只有在删除bounding-box属性后才会触发循环。

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

如何在另一个指令

1 个答案: