Disable watch or ngRepeatWatch

[Thomas LE JEUNE]

Hi there !

I'm currently working on a webapp for TVs, and TVs/boxes performance is really bad, low CPU, not a big memory... So I must have a special eye on performance and I was wondering if there's a way to manually disable/enable the automatic watch on {{ }} bindings and ng-repeat (I'm not talking about $scope.$watch here) ?

My idea is when a pane/block is hidden, do not longer watch for model and collection updates, keep the templates "static", only allow watch when pane is visible. I thought about saving ng-repeat sources when going hidden, then setting the source to a blank array/collection (no template rendering though, lighter dom tree), and re-injecting the saved source to the ng-repeat when going visible. Bad point is that it will recompile everything, may be awful when having a huge collection.

Have you ever experimented the same case, and if yes, how did you solve it ? What seems to be the best practice for you ?

Thanks a lot for your informed advices !

Thomas

[tonypee]

I just asked the same questions 2 days ago, without reply. In my cause i was just looking to parse the template once (no watch). a disable of watch would work too. 

hope we can get an experts attention!

[Thomas LE JEUNE]

Hey guys,

Just for the update, the performance issues I ran over were not directly caused by several watchers. I think JS execution is really fast and just watching an object's updates can't slow down an entire application.

But in my case, I'm working on a very low-end device, so what's really slow my app isn't angular itself, but the way I articulate it, the way I organize my application code. I studied more deeply my code and really understood that you shouldn't let Angular do a lot of stuff for you, unless you need it, but everything is a matter of compromises :

1) The complex the DOM tree is, the slower the rendering will be: you must light as possible your DOM tree, playing with CSS and neat templates

2) If your templates are kind of 'static' (won't really change, won't be updated by some user action), I recommend to avoid write them with a lot of angular bindings, e.g with a lot of ng-bind and {{ myModel }}, because yeah it will increase the amount of watchers in your app. Few is good but maybe it's not very scalable. Instead, use some third-party templating system, pre-compile your templates, and put them in your ng-repeat for example, within a directive. It works like a charm for me (I created a directive called <doT template-id="xxx"></doT> wich will compile the referenced template with the current scope)

3) Pay a special attention to reflows: on low-end devices, cache your nodes when possible, cache your calls to offset[Left, Right..], scroll[Top, Left...]. Thinking the way you touch the DOM can prevent a lot of unnecessary reflows.

So that's the spirit, and I think working with the power of Angular with certain difficulties like low-power devices will improve your front-end skills, because it's not only a matter of using all your framework features, but you'll have to be smart at coding the entire ecosystem of your app (HTML, CSS, Graphics...), and use only what you need in Angular.

[Thomas LE JEUNE]

Also, just in case, if you want to stop a custom $watch you've set, you can use the "unregister" method the $watch returns :

var unregister = $scope.$watch('foo', function () {
  // Do something interesting here ...
  unregister();
});

But I'd love to have a way to manage bindings 'active state', like :

<div ng-repeat="item in source" ng-active="myActiveState">
...
</div>

or

<span ng-binding-active="expression">{{ foo }}</span>

[Tekno]

+1 for something like an ng-active directive.

I have 200 drop-down menus for 200 cells, each menu have like 10 row. So I generate 2000 rows of dropdown menu items, each row with a binding. However I only have 1 drop down item open all the time.. So now I somehow have to refactor my code to really have just one drop down menu and re-attach the dom to the scope somehow. It would be so nice if angular would do it for me... Now I can totally forget the boostrap dropdown js code, and simple angular code, and write some custom code angular & bootstarp dropdown code. Yay.