How do I use scope watch and scope apply in AngularJS

Question

I don t understand how to use  scope  watch and  scope  apply  The official documentation isn t helpful   What I don t understand specifically    Are they connected to the DOM  How can I update DOM changes to the model  What is the connection point between them    I tried this tutorial  but it takes the understanding of  watch and  apply for granted   What do  apply and  watch do  and how do I use them appropriately

User · Answer

I found very in-depth videos which cover $watch, $apply, $digest and digest cycles in:

Following are a couple of slides used in those videos to explain the concepts (just in case, if the above links are removed/not working).

In the above image, "$scope.c" is not being watched as it is not used in any of the data bindings (in markup). The other two ($scope.a and $scope.b) will be watched.

From the above image: Based on the respective browser event, AngularJS captures the event, performs digest cycle (goes through all the watches for changes), execute watch functions and update the DOM. If not browser events, the digest cycle can be manually triggered using $apply or $digest.

More about $apply and $digest:

User · Answer

You need to be aware about how AngularJS works in order to understand it   Digest cycle and  scope  First and foremost  AngularJS defines a concept of a so-called digest cycle  This cycle can be considered as a loop  during which AngularJS checks if there are any changes to all the variables watched by all the  scopes  So if you have  scope myVar defined in your controller and this variable was marked for being watched  then you are implicitly telling AngularJS to monitor the changes on myVar in each iteration of the loop   A natural follow-up question would be  Is everything attached to  scope being watched  Fortunately  no  If you would watch for changes to every object in your  scope  then quickly a digest loop would take ages to evaluate and you would quickly run into performance issues  That is why the AngularJS team gave us two ways of declaring some  scope variable as being watched  read below     watch helps to listen for  scope changes  There are two ways of declaring a  scope variable as being watched    By using it in your template via the expression  lt span gt   myVar   lt  span gt  By adding it manually via the  watch service   Ad 1  This is the most common scenario and I m sure you ve seen it before  but you didn t know that this has created a watch in the background  Yes  it had  Using AngularJS directives  such as ng-repeat  can also create implicit watches   Ad 2  This is how you create your own watches   watch service helps you to run some code when some value attached to the  scope has changed  It is rarely used  but sometimes is helpful  For instance  if you want to run some code each time  myVar  changes  you could do the following   function MyController  scope          scope myVar   1        scope  watch  myVar   function             alert  hey  myVar has changed                   scope buttonClicked   function              scope myVar   2     This will trigger  watch expression to kick in             apply enables to integrate changes with the digest cycle  You can think of the  apply function as of an integration mechanism  You see  each time you change some watched variable attached to the  scope object directly  AngularJS will know that the change has happened  This is because AngularJS already knew to monitor those changes  So if it happens in code managed by the framework  the digest cycle will carry on   However  sometimes you want to change some value outside of the AngularJS world and see the changes propagate normally  Consider this - you have a  scope myVar value which will be modified within a jQuery s   ajax   handler  This will happen at some point in future  AngularJS can t wait for this to happen  since it hasn t been instructed to wait on jQuery   To tackle this   apply has been introduced  It lets you start the digestion cycle explicitly  However  you should only use this to migrate some data to AngularJS  integration with other frameworks   but never use this method combined with regular AngularJS code  as AngularJS will throw an error then   How is all of this related to the DOM   Well  you should really follow the tutorial again  now that you know all this  The digest cycle will make sure that the UI and the JavaScript code stay synchronised  by evaluating every watcher attached to all  scopes as long as nothing changes  If no more changes happen in the digest loop  then it s considered to be finished   You can attach objects to the  scope object either explicitly in the Controller  or by declaring them in   expression   form directly in the view   I hope that helps to clarify some basic knowledge about all this   Further readings    Make Your Own AngularJS  Part 1  Scopes And Digest

User · Answer

AngularJS extends this events-loop  creating something called AngularJS context   watch   Every time you bind something in the UI you insert a  watch in a  watch list  User   lt input type  quot text quot  ng-model  quot user quot    gt  Password   lt input type  quot password quot  ng-model  quot pass quot    gt   Here we have  scope user  which is bound to the first input  and we have  scope pass  which is bound to the second one  Doing this we add two  watches to the  watch list  When our template is loaded  AKA in the linking phase  the compiler will look for every directive and creates all the  watches that are needed  AngularJS provides  watch   watchcollection and  watch true   Below is a neat diagram explaining all the three taken from watchers in depth   angular module  MY APP       controller  MyCtrl   MyCtrl  function MyCtrl  scope  timeout       scope users      quot name quot    quot vinoth quot     quot name quot   quot yusuf quot     quot name quot   quot rajini quot         scope  watch  quot users quot   function         console log  quot      reference checkers  watch      quot             scope  watchCollection  quot users quot   function         console log  quot      Collection  checkers  watchCollection      quot             scope  watch  quot users quot   function         console log  quot      equality checkers with  watch true       quot        true       timeout function         console log  quot Triggers All  quot         scope users             scope  digest          console log  quot Triggers  watchCollection and  watch true  quot         scope users push   name   Thalaivar           scope  digest          console log  quot Triggers  watch true  quot         scope users 0  name    Superstar         scope  digest             http   jsfiddle net 2Lyn0Lkb   digest loop When the browser receives an event that can be managed by the AngularJS context the  digest loop will be fired  This loop is made from two smaller loops  One processes the  evalAsync queue  and the other one processes the  watch list  The  digest will loop through the list of  watch that we have app controller  MainCtrl   function        scope name    quot vinoth quot       scope changeFoo   function            scope name    quot Thalaivar quot               name     lt button ng-click  quot changeFoo   quot  gt Change the name lt  button gt   Here we have only one  watch because ng-click doesn   t create any watches  We press the button   The browser receives an event which will enter the AngularJS context The  digest loop will run and will ask every  watch for changes  Since the  watch which was watching for changes in  scope name reports a change  it will force another  digest loop  The new loop reports nothing  The browser gets the control back and it will update the DOM reflecting the new value of  scope name The important thing here is that EVERY event that enters the AngularJS context will run a  digest loop  That means that every time we write a letter in an input  the loop will run checking every  watch in this page    apply   If you call  apply when an event is fired  it will go through the angular-context  but if you don   t call it  it will run outside it  It is as easy as that   apply will call the  digest   loop internally and it will iterate over all the watches to ensure the DOM is updated with the newly updated value  The  apply   method will trigger watchers on the entire  scope chain whereas the  digest   method will only trigger watchers on the current  scope and its children  When none of the higher-up  scope objects need to know about the local changes  you can use  digest

User · Answer

Just finish reading ALL the above  boring and sleepy  sorry but is true   Very technical  in-depth  detailed  and dry  Why am I writing  Because AngularJS is massive  lots of inter-connected concepts can turn anyone going nuts  I often asked myself  am I not smart enough to understand them  No  It s because so few can explain the tech in a for-dummie language w o all the terminologies  Okay  let me try  1  They are all event-driven things   I hear the laugh  but read on  If you don t know what event-driven is Then think you place a button on the page  hook it up w  a function using  quot on-click quot    waiting for users to click on it to trigger the actions you plant inside the function     Or think of  quot trigger quot  of SQL Server   Oracle  2   watch is  quot on-click quot   What s special about is it takes 2 functions as parameters  first one gives the value from the event  second one takes the value into consideration    3   digest is the boss who checks around tirelessly  bla-bla-bla but a good boss  4   apply gives you the way when you want to do it manually  like a fail-proof  in case on-click doesn t kick in  you force it to run    Now  let s make it visual  Picture this to make it even more easy to grab the idea   In a restaurant  - WAITERS are supposed to take orders from customers  this is  watch    function   return orders      function   Kitchen make it       - MANAGER running around to make sure all waiters are awake  responsive to any sign of changes from customers  This is  digest   - OWNER has the ultimate power to drive everyone upon request  this is  apply

User · Answer

There are  watchGroup and  watchCollection as well  Specifically   watchGroup is really helpful if you want to call a function to update an object which has multiple properties in a view that is not dom object  for e g  another view in canvas  WebGL or server request    Here  the documentation link

User · Answer

In AngularJS  we update our models  and our views templates update the DOM  automatically   via built-in or custom directives     apply and  watch  both being Scope methods  are not related to the DOM   The Concepts page  section  Runtime   has a pretty good explanation of the  digest loop   apply  the  evalAsync queue and the  watch list  Here s the picture that accompanies the text     Whatever code has access to a scope  ndash  normally controllers and directives  their link functions and or their controllers   ndash  can set up a  watchExpression  that AngularJS will evaluate against that scope  This evaluation happens whenever AngularJS enters its  digest loop  in particular  the   watch list  loop   You can watch individual scope properties  you can define a function to watch two properties together  you can watch the length of an array  etc   When things happen  inside AngularJS   ndash  e g   you type into a textbox that has AngularJS two-way databinding enabled  i e   uses ng-model   an  http callback fires  etc   ndash   apply has already been called  so we re inside the  AngularJS  rectangle in the figure above  All watchExpressions will be evaluated  possibly more than once  ndash  until no further changes are detected    When things happen  outside AngularJS   ndash  e g   you used bind   in a directive and then that event fires  resulting in your callback being called  or some jQuery registered callback fires  ndash  we re still in the  Native  rectangle  If the callback code modifies anything that any  watch is watching  call  apply to get into the AngularJS rectangle  causing the  digest loop to run  and hence AngularJS will notice the change and do its magic

[angularjs] How do I use $scope.$watch and $scope.$apply in AngularJS?

Examples related to angularjs

Examples related to angularjs-scope