How to use $compile correctly?

Question

Angular

I'm trying to make an attribute directive, when hung, the current element will be copied via $(element).clone() and added before the current element, somehow modified and somehow moved by ondrag. The problem is that it has dynamic content, so you need to compile it. If I try to do $compile(clone)(scope); when preparing a clone, the application crashes from stackoverflow, if I compile in onDrag, wild brakes start.

function link(scope, element, attrs) {
....
     $ionicGesture.on('dragright' onDrag, element);
     clone = $(element).clone();
     wrapper = $('<div> </div>').append(clone);
     clone.css('position', 'absolute');
     
     element.before(wrapper);
     $compile(wrapper)(scope); //stack overflow
     
    $compile(wrapper)(scope, function (clonned) { //опять stack overflow
     element.before(clonned);
    }); 

    function onDrag() {
     clone.css('left', ....) ;
     $compile(wrapper)(scope); //Работает, но с дикими тормозами + контент {{}} успевает показаться
    }
}

Answer 1

So it's not surprising that stackoverflow. You call compile on the cloned element. Compile calls the link function -> call compile -> clone the element and call compile -> call the link function ....
What do you want to end up with?