February 10, 2015

Stop and Resume Binding in AngularJS

Hi,

There comes a time when you need to tweak the native behavior of a framework.
For me it was pretty straight forward desire to stop and resume binding for DOM elements.

The reason behind it was that sometimes I have several elements on the DOM which listen to the same data, but not all of them are viewable. Only one of them is viewable and this is the one I would like the binding to keep updating, while the rest shut the hell up and do nothing over the data changes.

AngularJs is not too kind when it comes to tempering with it's biding mechanism and I guess they have they reasons. The binding mechanism is something that can dramatically affect the performance of an application.

If you go little bit deeper (really, no too deep) you find that binding is all about the digest cycle which in turn invoke watchers, which are functions set to watch for changes and invoke callback accordingly. It is these $$watchers which you would like to remove and retrieve in order to connect and disconnect to the digest cycle.

I've made a simple POC where I created DOM with 2 identical directive bound to the same data on their parent scope. I also added buttons to toggle their binding - pressing it once cuts off the binding for a specific directive while the other keeps on updating. Another click resumes the binding.

Simple - you can find the code here on Plunker

Take care.






10 comments:

Raju Kumar said...

Thanks for sharing with us that awesome article you have amazing blog.....
Angularjs Training In Hyderabad

osvaldo anderson said...

I think that Angular.JS is perfect for Single Page Applications.

caroline jesi said...

Thanks for sharing about Angular,It’s a structural framework for dynamic web application; it lets you extend the syntax of HTML to demonstrate your apps components clearly. All functionality happens inside the browser making it an ultimate companion with any server technology.
Regards,
Angularjs training in chennai|Angularjs course in chennai

Priya said...



The oracle database is capable of storing the data in two forms such as logically in the form of table spaces and physically like data files.
Oracle Training in Chennai | oracle dba training in chennai

geethu said...

Angularjs is the great javascript framework that has some compelling features not for developers but also for the designers. Angularjs is very essential for the web developers to know about its importance.
Angularjs Training in Chennai | angularjs course in chennai

for IT the said...

I have read your blog its very attractive and impressive. I like it your blog.

Angularjs Online Training Angularjs Training Angularjs Training Angularjs Training in Chennai Angularjs Training in Chennai Angularjs Course Angularjs Course Angular 2 Training in Chennai

Kamalakar said...


I Visited lot of blogs and Web sites But in this AngularJS Blog Information is Very usefulthanks for sharing it........

Oracle dba certification cost in chennai said...

Thanks to shared this valuable news with me.
Oracle courses | DBA course

venu puram said...

Hello,

Thank you for sharing about AngularJS and well AngularJS is an evergreen field. While I was having my PMP Course in Kuwait I was supposed to know about AngularJS Which is having a good platform over all courses comparing with PMP.
Thankyou so much for the article Keep Updating

Rajesh Developer said...

It's very nice blog. I'm so happy to gain some knowledge from here. Thank you for valuable information on
AngularJS Training in Chennai.
Hoping to get more info...