A simple, efficient Angular JS directive to replace HTML

Question

I'm trying to create a very simple Angular JS directive which simply replaces an tag with an SVG icon which will differ depending on the name attribute. So this...

<icon name="plus" />

might be replaced with this.....

<SVG version="1.1"><path>...</path></SVG>

Because all basically going to be a simple switch statement followed by an element.replaceWith(), it doesn't require any $scope, or anything like that. In fact once it's been compiled I'd rather Angular forgot about it completely and reduced any memory wastage etc.

My reason for this is that I've read about a maximum limit on Angular directives on a page and I'm going to be using a lot of icons so want to reduce wastage.

So basically my question is how to do this as efficiently as possible, or should I not be worried?

Many thanks.

Wow, somebody has voted for this question to be closed because it is "too broad". How do I narrow this question down? I'm asking if there's a way to get Angular to not remember anything about the element once it's been replace (e.g. no scope). That's pretty specific! — jonhobbs
– jonhobbs, Commented Jan 8, 2014 at 0:05
can you share a link to "maximum limit on Angular directives" article? — Ilan Frumer
– Ilan Frumer, Commented Jan 8, 2014 at 0:32
I have seen it mentioned many times that you shouldn't have more than around 2000 "angular items" on the page. I know that 2000 is a very high number and I'll never have that many icons but a large table with many items per row could have that many so I'm just trying not to add to any slowness with my icon directive. Here's an example.. ngmodules.org/modules/abourget-angular — jonhobbs
– jonhobbs, Commented Jan 8, 2014 at 0:46
I have added a jsfiddle with a working example jsfiddle.net/jonhobbs/gEPvE I just want to know if there's a way to optimize it so that it's not hanging onto any unnecessary scope info or bindings that it doesn't need once the element has been replaced. — jonhobbs
– jonhobbs, Commented Jan 8, 2014 at 0:58

Ilan Frumer · Accepted Answer · 2014-01-08 01:11:23Z

1

Try this:

app.directive('icon', function($sce){

  return {
    restrict: 'E',    
    link: function(scope, elm, attrs){
       var file = "svg/" + attrs.name + ".html";
       elm.replaceWith($sce.getTrustedHtml(file));
    }
  }

})

Implications

The link function will only run once at each compilation process.
When compilation occurs? read this
no new scope is created ( the scope you see inside the link function is just a reference to outer scope)
If you put it inside a repeater than it could be loaded multiple times because ng-repeat is removing and inserting elements to DOM.
you must use a link function (and not a compile function) since you do DOM manipulation

edited Jan 8, 2014 at 1:11

answered Jan 8, 2014 at 0:25

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

2 Comments

jonhobbs Over a year ago

That would certainly work (although my html will be inline to avoid lots of http calls). My question was really about whether it's possible to optimize this at all by making sure it's not creating a scope or any bindings or anything unnecessary one the replace has been done. It'll never change once it's on the page so does using a link function do anything that will waste memory?

jonhobbs Over a year ago

Thanks ilan. I'm marking this as the right answer because your explanation was what I was looking for. If no new scope is being created and I'm not watching/observing/binding anything else then I'm guessing it's safe to use this A LOT!

Collectives™ on Stack Overflow

A simple, efficient Angular JS directive to replace HTML

1 Answer 1

Implications

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Implications

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related