angularjs中使用$scope.$watch监控对象模型的变化
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs中使用$scope.$watch监控对象模型的变化相关的知识，希望对你有一定的参考价值。
如果对象模型发生变化时，可以使用$scope.$watch监控变化
<html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script> </head> <body ng-controller="ctrl"> <input type="text" ng-model="text1" ng-model-options="{ updateOn: ‘blur‘ }" /> <div>输入框内容改变次数：{{count}}</div> </body> <script type="text/javascript"> var app = angular.module(‘myApp‘, []) .controller(‘ctrl‘, function($scope){ $scope.count = 0; $scope.$watch(‘text1‘,function(){ $scope.count++; }); }); </script> </html>
稍微改一下，输出修改前后的内容：
<html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script> </head> <body ng-controller="ctrl"> <input type="text" ng-model="text1" ng-model-options="{ updateOn: ‘blur‘ }" /> <div>输入框内容改变次数：{{count}}</div> <div>原内容：{{content1}}</div> <div>新内容：{{content2}}</div> </body> <script type="text/javascript"> var app = angular.module(‘myApp‘, []) .controller(‘ctrl‘, function($scope){ $scope.count = 0; $scope.$watch(‘text1‘,function(newValue,oldValue){ $scope.count++; $scope.content1 = oldValue; $scope.content2 = newValue; }); }); </script> </html>
以上是关于angularjs中使用$scope.$watch监控对象模型的变化的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS中的$watch()，$digest()和$apply()
一步步构建自己的AngularJS——scope之$watch及$digest
AngularJS $watch 与 $watchCollection：性能哪个更好？