AngularJS - Manual compile vs natural compile

Question

It seems to be pretty generally accepted you shouldn't need to manually compile elements (via the $compile service) very often. Because of some dynamically driven html we have a directive that is doing a manual compile in the link function. Something like this (the actual retrieving of the dynamic html is much more involved):

    link: function(scope, element, attrs) {
        element.append(someService.getDynamicHtml());
        $compile(element.contents())(scope);
    }

We've started to hit some performance issues, as there is a page that issues this directive several times, and each compile is taking 300 or so ms.

In an attempt to better understand what's going on "underneath the hood", and thus make better design decisions, my question is what is the difference between doing this kind of manual compile right in the middle of the link function, as opposed to providing the directive with a template and letting angular naturally compile it?

Here is a fiddle to demonstrate the two scenarios I'm talking about: http://jsfiddle.net/KNLea/

I think we can refactor our dynamic html generation so it constructs a string and than we can use it as the template. The above being changed to something like this:

    template: someService.getDynamicHtml(),
    link: function(scope, element, attrs) {
        //no need for manual compile anymore
    }

I just want to understand what fundamental differences the two have, and thus what, if any, performance gain we can expect. Does it not make a difference at all? When angular compiles the template does it just do the same thing the $compile service does? Or is there an underlying difference in the natural compiling of the template that would make a difference in performance?

Answer 1

Angular itself uses $compile to compile directive templates, so there is no inherent slowdown in compiling manually.

What does play an important role though, is when and how often you compile.

Angular will compile once for each directive instance and then just link as many times as needed.
You, on the other hand, make an additional compile+linking with each linking. That's a lot of overhead.

It is not quite clear how dynamic you dynamic HTML is, but if it stays the same for the lifetime of a session, there are much more efficient ways to compile.