脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Angularjs-Dirty Checking，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 Angularjs实现了数据双向绑定，就像下面这样：
<!doctyPE htML> <htnl ng-app> <head> <script src="js/Angular.js"></script> </head> <body> <input type="text" ng-model="name"> <h2>Hello {{name}}</h2> </body> </html>
这使得在View和Model在变化的时候，都会更新对方：
Angularjs是通过DirtyChecking实现的Two-Way Data Binding:
$scope.$apply:当控制器或指令在Angularjs运行时，Angularjs内部会运行$scope.$apply函数，这个函数会接收一个函数参数并且运行它，在这之后才会在rootScope上运行$digest.
$digest函数将会在$rootScope中被$scope.$apply所调用。它将会在$rootScope中运行digest循环，然后向下遍历每一个作用域并在每个作用域上运行循环。在简单的情形中，digest循环将会触发所有位于$$watchers变量中的所有watchExp函数，将它们和最新的值进行对比，如果值不相同，就会触发监听器。
当digest循环运行时，它将会遍历所有的监听器然后再次循环，只要这次循环发现了”脏值”，循环就会继续下去。如果watchExp的值和最新的值不相同，那么这次循环就会被认为发现了脏值。理想情况下它会运行一次，如果它运行超10次，会看到一个错误。
因此当$scope.$apply运行的时候，$digest也会运行，它将会循环遍历$$watchers，只要发现watchExp和最新的值不相等，变化触发事件监听器。 在AngularJS中，只要一个模型的值可能发生变化，$scope.$apply就会运行。这就是为什么当你在AngularJS之外更新$scope时，例如在一个setTimeout函数中，你需要手动去运行$scope.$apply()：这能够让AngularJS意识到它的作用域发生了变化。
$scope.$watch:为了监视一个变量的变化，可以使用$scope.$watch函数。这个函数有三个参数，它指明了”要观察什么”(watchExp)，”在变化时要发生什么”(listener),以及要监视的是一个变量还是一个对象。当在检查一个参数时，可以忽略第三个参数。$watch的第一个参数可以是字符串，也可以是函数。
$$watchers:$scope中的$$watchers变量保存着所定义的所有的监视器。如果在控制台中打印$$watchers，会发现它是一个对象数组。$watch函数将会返回一个deregisterWatch函数。这意味着如果使用$scope.$watch对一个变量进行监视，也可以在以后通过调用某个函数来停止监视。
简化版的Dirty-Checking:
HTML:
<input type="text" />
<a href="#" onclick="updateScopeValue();">Set input value to Bob</a>
Javascript:
VAR Scope = function( ) { this.$$watchers = []; }; Scope.PRototype.$watch = function( watchExp, listener ) { this.$$watchers.push( { watchExp: watchExp, listener: listener || function() {} } ); }; Scope.prototype.$digest = function( ) { var dirty; do { dirty = false; for( var i = 0; i < this.$$watchers.length; i++ ) { var newValue = 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 = new Scope(); $scope.name = 'Ryan'; var element = 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; } ); var updateScopeValue = function updateScopeValue( ) { $scope.name = 'Bob'; $scope.$digest(); };
使用上面的代码，无论何时改变了input的值，$scope中的name属性都会相应的发生变化。这样就实现了数据双向绑定。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-Angularjs-Dirty Checking全部内容，希望文章能够帮你解决javascript代码实例教程-Angularjs-Dirty Checking所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。