How to replace an element in AngularJS directive linking function?

Question

I\'m creating a AngularJS directive that needs to replace itself (the tag must not be present in the DOM after execution) with

Answer 1

Your fiddle seems pretty basic but you should be able to just use outerHTML

element[0].outerHTML ='
I should not be red
';

Updated fiddle

If you have to deal with ng-repeat you can bind your items to a scope property and reference them in your template that you compile. Once it is compiled you can use jQuery replaceWith()

html

***

directive

.directive('row', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            items: "="
        },
        link: function (scope, element, attrs) {
            var html ='
I should not be red
';
            var e =$compile(html)(scope);
            element.replaceWith(e);
        }
    };
});

ng-repeat example