Angular performance: ng-show vs. dynamically recompile directive

Question

Let's say I have a boolean format that controls how a collection of items should be displayed by my directive. Depending on the value of format, my html changes radically.

So far I'm using two separate templates, and I dynamically recompile the directive whenever format changes, by using $watch(format) in the link function of the directive.

I wonder if it would be faster to use only one template, and split all my code between a big ng-show="format" and a ng-hide="format". What's the best practice in that situation?

It's not removing elements that I'm worried about it, but the time it takes to recreate them. — antoine
– antoine, Commented Feb 19, 2015 at 20:22

Joe Enzminger · Accepted Answer · 2015-02-17 05:54:02Z

1

$compile is expensive (relatively). Your use case sounds like a candidate for ng-switch, so don't reinvent the wheel if ng-switch works for you.

However, inside your directive, you can cache the compilation of each template and then re-link them by calling the link function returned by $compile. This would be pretty much as performant as ng-switch .

In pseudo code your link function would look like:

link: function(scope, element, attrs) {
     //create and cache your template link functions
     var format1link = $compile(template1);
     var format2link = $compile(template2);
     scope.$watch('format') {

         //call appropriate link function based on the value of format
         var newElement = format1link(scope);
         //or
         var newElement = format2link(scope);

         //replace element contents with newElement

     });
}

edited Feb 17, 2015 at 5:54

answered Feb 17, 2015 at 5:14

Joe Enzminger

11.2k3 gold badges54 silver badges77 bronze badges

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

3 Comments

antoine Over a year ago

Neat! I was caching the html templates, but I didn't thought of caching the compiled templates themselves.

antoine Over a year ago

But you are right: ng-switch is much easier in that case. Otherwise I had to handle the asynchronous generation of the compiled templates, as well as the $watch listener, so it was a pain. And ng-switch seems really fast so far.

Joe Enzminger Over a year ago

Glad to help. 9 times out of 10 angular already does what you are trying to do!

Collectives™ on Stack Overflow

Angular performance: ng-show vs. dynamically recompile directive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related