Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I'm creating a <row> AngularJS directive that needs to replace itself (the <row> tag must not be present in the DOM after execution) with a dynamic template that can contain any HTML code.

The problem in using replace: true is that it does not work with table's tags and that the template is dynamically chosen.

So I'm trying to find a way to replace the element in the linking function, with no success.

Using jQuery's .replaceWith() breaks ngRepeats for unknown reason.

Any hints ?

Here is the fiddle

share|improve this question
Can you provide a jsfiddle of what you've tried? Much easier to see then try to discern from your description. – Mathew Berg Jun 13 at 15:24
jsfiddle.net/fMP9s – Antonio Madonna Jun 13 at 15:40
I think that this question has no solution, since replacing <row>, which holds ng-repeat OBVIUSLY breaks ng-repeats! – Antonio Madonna Jun 13 at 15:53

1 Answer

up vote 4 down vote accepted

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

element[0].outerHTML ='<div>I should not be red</div>';

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

<row items="items">***</row>

directive

.directive('row', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            items: "="
        },
        link: function (scope, element, attrs) {
            var html ='<div ng-repeat="item in items">I should not be red</div>';
            var e =$compile(html)(scope);
            element.replaceWith(e);
        }
    };
});

ng-repeat example

share|improve this answer
thank you. This answered my question but I had to take another road.. – Antonio Madonna Jun 14 at 5:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.