How to 'unwatch' an expression

Question

Say I have an ng-repeat with a big array.

When ng-repeat runs, it adds every element of that array to an isolated scope, as well as having the array itself in a scope. That means that $digest checks the entire array for changes, and on top of that, it checks every individual element in that array for changes.

See this plunker as an example of what I'm talking about.

In my use case, I never change a single element of my array so I don't need to have them watched. I will only ever change the entire array, in which case ng-repeat would re-render the table in it's entirety. (If I'm wrong about this please let me know..)

In an array of (say) 1000 rows, that's 1000 more expressions that I don't need evaluated.

How can I deregister each element from the watcher while still watching the main array?

Perhaps instead of deregistering I could have more control of my $digest and somehow skip each individual row?

This specific case is actually an example of a more general issue. I know that $watch returns a 'deregisteration' function, but that doesn't help when a directive is registering the watches, which is most of the time.

Answer 1

To have a repeater with a large array that you don't watch to watch every item.

You'll need to create a custom directive that takes one argument, and expression to your array, then in the linking function you'd just watch that array, and you'd have the linking function programmatically refresh the HTML (rather than using an ng-repeat)

something like (psuedo-code):

app.directive('leanRepeat', function() {
    return {
        restrict: 'E',
        scope: {
           'data' : '='
        },
        link: function(scope, elem, attr) {
           scope.$watch('data', function(value) {
              elem.empty(); //assuming jquery here.
              angular.forEach(scope.data, function(d) {
                  //write it however you're going to write it out here.
                  elem.append('<div>' + d + '</div>');
              });
           });
        }
    };
});

... which seems like a pain in the butt.

Alternate hackish method

You might be able to loop through $scope.$$watchers and examine $scope.$$watchers[0].exp.exp to see if it matches the expression you'd like to remove, then remove it with a simple splice() call. The PITA here, is that things like Blah {{whatever}} Blah between tags will be the expression, and will even include carriage returns.

On the upside, you might be able to just loop through the $scope of your ng-repeat and just remove everything, then explicitly add the watch you want... I don't know.

Either way, it seems like a hack.

To remove a watcher made by $scope.$watch

You can unregister a $watch with the function returned by the $watch call:

For example, to have a $watch only fire once:

var unregister = $scope.$watch('whatever', function(){ 
     alert('once!');
     unregister();
});

You can, of course call the unregister function any time you want... that was just an example.

Conclusion: There isn't really a great way to do exactly what you're asking

But one thing to consider: Is it even worth worrying about? Furthermore is it truly a good idea to have thousands of records loaded into dozens of DOMElements each? Food for thought.

I hope that helps.

---

EDIT 2 (removed bad idea)

Answer 2

$watch returns a function that unbinds the $watch when called. So this is all you need for "watchOnce":

var unwatchValue = scope.$watch('value', function(newValue, oldValue) {
  // Do your thing
  unwatchValue();
});