Why does using wrap inside directive compile function cause infinite loop?

Question

Why does using wrap inside directive compile function cause infinite loop?

I am trying to use the wrap function inside the compile function of a directive.

The following will cause an infinite loop and crash the browser:

function compiler(tElement, tAttrs, transcludeFn) {
    var wrapper = angular.element('<div />');
    tElement.wrap(wrapper);

    return linker;
}

Why is this happening?

angularjs
angularjs-directive

Answer 1

I'll guess... the first time your compiler function is called, it wraps the element (i.e., the element in the HTML where you put your directive attribute) inside a new <div></div>. Angular treats this as a new element and it compiles it... finds your directive, which calls the compiler function again, wraps it again, and Angular treats that as a new element... ad infinitum.