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.

Mouthwash

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.

---

EDIT 2 (removed bad idea)

Crampton

Thanks blesh, great answer. I'll try these options and will respond with what works best. re: Is it even worth worrying about - it's fine in Chrome but kills us in IE. We're (currently) using infinite scrolling to pull down more records so most of the time the 20-or-so that we have on the initial load is sufficient and fast. If the user scrolls and scrolls, however, there could be a good number of records. – Mouthwash

It's okay... everything kills me in IE. ;) – Crampton

I would recommend using some sort of system that only puts in the DOM what is visible in the scrolling. Maybe try ng-grid github.com/angular-ui/ng-grid – Colorant

@blesh - for your last edit, would that solve the problem? I know that it wouldn't update the UI, but it would still but every row object in the watch non-the-less, no? – Mouthwash

@RoyTruelove, yeah, I suppose you're right. Probably the only sure bet would be to create your own directive that did the repeating for you. – Crampton

Ah well, that was my favorite option :) – Mouthwash

I just implemented the directive in a hopefully-reusable way in another answer. – Columnist

I am having almost the same problem here - #17380078 – Nunnally

This is a great answer in that it solved a similar problem I had where I had a loop of custom elements, but was using a templateUrl. The $scope var used in an expression in the template was binding to the $scope like it should, but it was updating each element, this making them all the same. Once I added the elem.append INSIDE the directive vs. using a templateUrl, the elements were no longer bound to the $scope. Excellent technique. – Nonresistance

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();
});

Perorate

Answer 3

Edit: see the other answer I posted.

I've gone and implemented blesh's idea in a seperable way. My ngOnce directive just destroys the child scope that ngRepeat creates on each item. This means the scope doesn't get reached from its parents' scope.$digest and the watchers are never executed.

Source and example on JSFiddle

The directive itself:

angular.module('transclude', [])
 .directive('ngOnce', ['$timeout', function($timeout){
    return {
      restrict: 'EA',
      priority: 500,
      transclude: true,
      template: '<div ng-transclude></div>',
        compile: function (tElement, tAttrs, transclude) {
            return function postLink(scope, iElement, iAttrs, controller) {
                $timeout(scope.$destroy.bind(scope), 0);
            }
        }
    };
}]);

Using it:

      <li ng-repeat="item in contents" ng-once>
          {{item.title}}: {{item.text}}
      </li>

Note ng-once doesn't create its own scope which means it can affect sibling elements. These all do the same thing:

  <li ng-repeat="item in contents" ng-once>
      {{item.title}}: {{item.text}}
  </li>
  <li ng-repeat="item in contents">
      <ng-once>
          {{item.title}}: {{item.text}}
      </ng-once>
  </li>
  <li ng-repeat="item in contents">
      {{item.title}}: {{item.text}} <ng-once></ng-once>
  </li>

Note this may be a bad idea

Columnist

Answer 4

You can add the bindonce directive to your ng-repeat. You'll need to download it from https://github.com/pasvaz/bindonce.

edit: a few caveats:

If you're using {{}} interpolation in your template, you need to replace it with <span bo-text>.

If you're using ng- directives, you need to replace them with the right bo- directives.

Also, if you're putting bindonce and ng-repeat on the same element, you should try either moving the bindonce to a parent element (see https://github.com/Pasvaz/bindonce/issues/25#issuecomment-25457970 ) or adding track by to your ng-repeat.

Columnist

I've plugged this into one of my data grids that is showing 20 columns but it's still lagging after 100 rows. If I switch out the data in the column for some text, such as "data", then it doesn't lag. – Burck

I was using bo-text but still encountering the issues. It's a shame there isn't an asynchronous ng-repeat which only updates when an event is fired. It'd make life a lot easier! – Burck

Answer 5

If you are using angularjs 1.3 or above, you can use the single bind syntax as

<li ng-repeat="item in ::contents">{{item}}</li>

This will bind the value and will remove the watchers once the first digest cycle is run and the value changes from undefined to defined for the first time.

A very helpful BLOG on this.

Labrie