How to change root element in directive compile function?

[Henrik Bechmann]

I want to change/replace the root element of the tElement passed in to the directive compile function.

(replace flag generates error, and in any case is deprecated). The effect should be the same as setting the replace flag to true.

function compile(tElement...

   tElement.replaceWith('<new html>');

has no effect.

Is there some way of doing this?

Thanks.

[Henrik Bechmann]

Here's how I resolved the issue. All comments welcome.

// in the following directive, replace flag generates multidir error, so done manually

.directive('mwControlButton',['$compile',function($compile){

    return {

        restrict:'E',

        compile: function(tElement,tAttrs) {

            // defer compilation to link function

            var $content = $('<md-button>'+tElement[0].innerHTML+'</md-button>');

            tElement[0].innerHTML = '';

            // merge attributes from parent

            $content.attr('something','something'); // test

            // return link function

            return function(scope,element){

                // monitor memory leaks here for scope -- but so far does not appear to be problem

                var content = $compile($content)(scope);

                element.replaceWith(content); 

            }

        }

    }

}]);