Angularjs Directives Performance - Pass an Array vs Passing Single Objects

Question

Performance wise, is it better to pass individual objects to a directive like so

<div ng-repeat="user in users">
  <user-info user="user"></user-info>
</div>

// user-info directive
<div>
  <span>{{ user.username }}</span><br>
  <span>{{ user.email }}</span>
</div>

Or pass the entire array to a single directive:

<user-list users="users"></user-list>

// user-list directive

<div ng-repeat="user in users">
  <span>{{ user.username }}</span><br>
  <span>{{ user.email }}</span>
</div>

I imagine the second option would be a better idea since the directive's methods wouldn't get called for every item in the array

Thanks for any input!

Sajeetharan · Accepted Answer · 2018-09-18 02:42:45Z

2

Definitely its the later way, because it does not have to render the element each time you iterate over users.

Angularjs starts to have performance issues when you have more watchers (which are responsible for handling your data-binding). Reducing the number of data bindings will definitely help.

answered Sep 18, 2018 at 2:42

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Petr Averyanov Over a year ago

Can you explain which element you mean. There is extra element in 1st approach, but if I remove <div> from user-info template -- elements count is same.

Collectives™ on Stack Overflow

Angularjs Directives Performance - Pass an Array vs Passing Single Objects

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