Asked  7 Months ago    Answers:  5   Viewed   41 times

I was in one of the angular presentation and one of the person in the meeting mentioned ng-bind is better than {{}} binding.

One of the reason, ng-bind put the variable in the watch list and only when there is a model change the data get pushed to view, on the other hand, {{}} will interpolate the expression every time (I guess it is the angular cycle) and push the value, even if the value changed or not.

Also it is said that, if you have not much data in on the screen you can use {{}} and the performance issue will not be visible. Can someone shed some light on this issue for me?

 Answers

77

If you are not using ng-bind, instead something like this:

<div>
  Hello, {{user.name}}
</div>

you might see the actual Hello, {{user.name}} for a second before user.name is resolved (before the data is loaded)

You could do something like this

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

if that's an issue for you.

Another solution is to use ng-cloak.

Tuesday, June 1, 2021
 
Jimenemex
answered 7 Months ago
45

Great scott, I think I've got it.

Instead of:

filter:chart.active=='false'

It should be:

filter:chart.active='false'

It's just the number of equal signs used. facepalm

Thanks for the responses, everyone.

Wednesday, August 11, 2021
 
rasmusx
answered 4 Months ago
79

Details like this aren't always available in the documentation - you have to read the source. I took a peek and it seems that (as of 2014-11-24) they both work in a very similar way. Both cause a single directive to be instantiated to change the value when needed (the curly interpolation directive is generated on the fly).

Both directives evaluate the expressions involved on every $digest just like everything else. The main difference is that while ng-bind doesn't do any further processing on the value, with curlies, the entire interpolated text is recalculated on every digest. Essentially a string is built using $interpolate and that is compared with the previous value (this happens within the bowels of $digest). Neither way will update the DOM if the value (either the plain value with ng-bind or the interpolated result with curlies) hasn't changed.

To me the accepted answer on that question is a more compelling reason to use ng-bind, i.e. you can use it to prevent a visible flash of the template tags before Angular loads and compiles them, without resorting to hacks like ng-cloak.

Depending on variables there may also be cases where curly interpolation is actually more performant. One situation I can think of is when using ng-bind instead of interpolation requires you to create a lot of otherwise redundant <span> elements, and that tips the scales in the other direction. An interpolation expression also causes a single watcher to be created for the entire string independent of how many variables you use, as opposed to ng-bind which creates one watcher for each instance.

But as always, don't optimize for performance early, and if you do, profile to find out which part really matters.

Saturday, October 9, 2021
 
Reid
answered 2 Months ago
86

As was discovered through the comments, you simply compared two different values: the size of the non-gzipped file in the file system, and the size of the gzipped download in the browser console.

Thursday, November 4, 2021
 
neon29
answered 1 Month ago
48

Pass the getCellColor method to the directive like this:

<count-table table-type='tableType' 
get-cell-color='getCellColor(col)'>
</count-table>

The directive looks like this:

app.directive('countTable', function(){
  return {
    restrict: 'E',
    scope: {
      tableType:'=tableType',
      getCellColor: '&'
    },
    templateUrl: 'table.html'
  };
});

The directive template looks like this:

 <table>
   <tr ng-repeat="row in tableType.data.rows">
      <td ng-repeat="col in row track by $index" ng-class="getCellColor({col: col})">{{col}}</td>
   </tr>
 </table>

Plunker

Sunday, November 21, 2021
 
Jeff Yates
answered 2 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share