CODEWITHSUNDEEP
javascriptangularjs
Clay Banks
Clay Banks

Reputation: 4591

Angularjs Directives Performance - Pass an Array vs Passing Single Objects

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!

Upvotes: 2

Views: 25

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222722

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.

Upvotes: 2

Related Questions