Angularjs: how to clone an element, uninterpolated

Question

I have a directive that clones its element, passes the clone through $compile(myClone)(scope); and appends it to the DOM.

If the original element has transcluded content, ex: This is some content {{withVariable}}

How can I clone it with the angularjs expressions uninterpolated, so that the cloned element has the expressions (and thus the same dynamic content as the original), rather than the values as resolved at the time of cloning?

If I use ng-bind directive, it work as desired.

ex. This is some content <span ng-bind="withVariable"></span>

plong0 · Accepted Answer · 2015-11-26 18:21:08Z

Ok, I found a solution using transclude: true on my directive.

And then I have in the link function:

link: function (scope, element, attrs , uiScrollpoint, transclude ){
    transclude(scope, function(clone, scope){
        // stash the un-interpolated innerHTML
        element[0].srcHTML = clone[0].innerHTML;
        element.append($compile(clone)(scope));
    });
}

When I clone the element, I retrieve the srcHTML before compiling:

var myClone = element.clone();
if(element[0].srcHTML){
    myClone[0].innerHTML = element[0].srcHTML;
}
$compile(myClone)(scope);

It seems to work, but I do see the limitation that if the original element's source is modified on the fly by JS DOM-manipulation functions that srcHTML wouldn't stay in sync. I'm thinking that this would be a pretty rare case though.

Maybe there is a better way to do this? If it's possible to get the uninterpolated HTML at clone time rather than only at transclusion time, that would really be the best.

Collectives™ on Stack Overflow

Angularjs: how to clone an element, uninterpolated

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related