Reuse Angular's template function

Question

In Angular, you can inject the $compile service, and you can compile things on the fly. Like this:

let compiledElement = $compile('<my-elem></my-elem>')(myScope);

So what I want to know is if it is possible to save the result of the first call to $compile so that it can be reused. Something like this:

let templateFunction = $compile('<my-elem></my-elem>');
cacheTemplateFunction(templateFunction);
let compiledElement = templateFunction(myScope);

Practically, here is what my code looks like:

const cachedTemplateFunction = {};

function compileRawHtml(html, scope){
    let compiledEl;
    if(cachedTemplateFunction[html]){
        let tempFunc = cachedTemplateFunction[html];
        compiledEl = tempFunc(scope)
    } else {
        let tempFunc = $compile(html);
        cachedTemplateFunction[html] = tempFunc;
        compiledEl = tempFunc(scope);
    }
}

So the first time through with that template, it will compile and cache the template function. Then the second time through it reuses it. When I call this, I get an error about childNodes of undefined. So am I to assume that you can't reuse the template function that is returned from the $compile call?

$compile(...) creates DOM. DOM piece cannot be in two different places simultaneously. — Estus Flask
– Estus Flask, Commented Nov 23, 2016 at 21:10

frosty · Accepted Answer · 2016-12-02 01:02:28Z

1

When you call $compile, it returns what is called a publicLinkFn. This function can be saved and called to bypass subsequent calls to the compile function. The only caveat is that you have to pass a second parameter to the publicLinkFn, which parameter is called a cloneAttachFn. The internals of Angular will call your cloneAttachFn, and pass two parameters to you. First will be a cloned copy of the element that you called $compile with. The second will be the scope for the clonedElement. Your cloneAttachFn needs to attach the element to the DOM. If it doesn't, you will get an error.

The only thing that needs to be changed in the above code is the following:

tempFunc(scope, (clonedEl, currentScope)=>{
    //You simply need to attach the clonedEl to the DOM
    angular.element('.some-selector').append(clonedEl);
})

answered Dec 2, 2016 at 1:02

frosty

21.8k8 gold badges58 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

frosty Over a year ago

This is what I did, and it cut down the time required to compile certain of my components by 40%. It went from 25ms to 15ms. And when you have 150 of them on a page, that adds up VERY QUICK!

Collectives™ on Stack Overflow

Reuse Angular's template function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related