Home > Developer > Web Develop
ANGULARJS implements data bidirectional binding, just like this:
<!DOCTYPE HTML><HTNLNg-app><Head> <Scriptsrc= "Js/angular.js"></Script></Head><Body> <inputtype= "text"Ng-model= "Name"> <H2>Hello {{Name}}</H2></Body></HTML>
This allows the view and model to be updated when they change:
Angularjs is the two-way Data Binding implemented through Dirtychecking:
$scope. $apply: When a controller or instruction runs in Angularjs, $scope is run inside Angularjs. $apply function, which takes a function parameter and runs it, after which it will run on Rootscope $digest .
$digest function will be $scope in the $rootscope. $apply is called. It will run the digest loop in $rootscope, then traverse each scope down and run the loop on each scope. In a simple case, the digest loop will trigger all the WATCHEXP functions that are in the $ $watchers variable, compare them to the latest values, and trigger the listener if the values are not the same.
When the digest loop runs, it iterates through all the listeners and loops again, and the loop continues as soon as the "dirty" value is found in the loop. If the value of Watchexp is not the same as the latest value, the loop is considered to have found a dirty value. Ideally it will run once and if it runs over 10 times, you will see an error.
So when the $scope. $apply run, the $digest will also run, it will iterate through the $ $watchers, as long as the watchexp and the latest values are found to be unequal, the change triggers the event listener. In Angularjs, as long as the value of a model can change, $scope. $apply will run. That's why when you update $scope outside of Angularjs, for example in a settimeout function, you need to run $scope manually. $apply (): This allows the ANGULARJS to realize that its scope has changed.
$scope. $watch: To monitor changes to a variable, you can use the $scope. $watch function. This function has three parameters that indicate "What to observe" (WATCHEXP), "What happens when it changes" (listener), and whether a variable or an object is to be monitored. When checking for a parameter, the third parameter can be ignored. The first parameter of the $watch can be a string, or it can be a function.
$ $watchers: The $ $watchers variable in the $scope holds all the monitors that are defined. If you print $ $watchers in the console, you will find that it is an array of objects. $watch function will return a deregisterwatch function. This means that if you use $scope. $watch to monitor A variable, you can also stop monitoring later by calling a function.
Simplified version of dirty-checking:
Html:
<type= "text"/><href= "#" onclick = "Updatescopevalue ();" > Set input value to Bob</a>
Javascript:
varScope =function( ) { This. $ $watchers = []; }; Scope.prototype. $watch=function(WATCHEXP, listener) { This. $ $watchers. Push ({watchexp:watchexp, Listener:listener||function() {} } );}; Scope.prototype. $digest=function( ) { varDirty; Do{Dirty=false; for(vari = 0; I < This. $ $watchers. Length; i++ ) { varNewValue = This. $ $watchers [I].watchexp (), OldValue= This. $ $watchers [I].last; if(OldValue!==newvalue) { This. $ $watchers [I].listener (NewValue, OldValue); Dirty=true; This. $ $watchers [i].last =NewValue; } } } while(dirty);};var$scope =NewScope (); $scope. Name= ' Ryan ';varelement = Document.queryselectorall (' input '); element[0].onkeyup =function() {$scope. Name= Element[0].value; $scope. $digest ();}; $scope. $watch (function(){ return$scope. Name;},function(NewValue, OldValue) {Console.log (' Input value updated-it is now ' +newvalue); element[0].value =$scope. Name;} );varUpdatescopevalue =functionUpdatescopevalue () {$scope. Name= ' Bob '; $scope. $digest ();};
Using the code above, the Name property in the $scope changes accordingly whenever the value of input is changed. This enables two-way binding of data.
Reference: http://ryanclark.me/how-angularjs-implements-dirty-checking/
Angularjs-dirty Checking
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
