Event emitters vs $watch when updating large data sets in AngularJs

Question

I've come across a scenario where I often need to update a large data set that will ultimately be rendered in a table for an analytics application. It seems incredibly inefficient to keep a watcher on the data given the size of the collection when I can just emit an event when I know the data has been updated and pass the new data along.

I've read that using event emitters in Angular applications are generally anti-patterns yet there never seems to be a solid explanation as to why.

What is the best practice here in terms of triggering an update?

Answer 1

There is no meta-ideal answer, we need to see your HTML to understand how these watchers are registered.

Basically, if your table is like this

<tr ng-repeat="line in table.lines">
  <td ng-repeat="column in line.columns">
    <!-- many watchers such as -->
    {{column.value}}
  </td>
</tr>

And let's say you don't want to watch every column.value until you know it has changed, then you could bind-once that value (requires angular 1.3+ or the external bindonce library)

<tr ng-repeat="line in table.lines">
  <td ng-repeat="column in line.columns track by column.timestamp">
    <!-- bind data once -->
    {{::column.value}}
  </td>
</tr>

And when that cell value change, update its timestamp. The trackBy will reset the td content only in such case.

However that is at the cost of replacing the DOM cell every time the value has changed. To be benchmarked against only refreshing the cell value but using watchers on every cell (which is not always an issue if the watchers are fast enough, ie short synchroneous code with no jquery etc).