Wish to understand the true meaning of Tathagata
I have learned ng-model before, and now I am learning $swatch, and I feel that the relationship between the two cannot be distinguished conceptually. ng-model is used to synchronize data between views and scopes. The problem is that since it is synchronization, it must involve monitoring. Changes in A are monitored by B, and B also changes. But the change of B is limited, that is, it must be consistent with A. The question is, what if the changes B wants to make are not consistent with A? How to do this? ng-model can not meet the needs. So, $swatch() was born. $swatch() is very similar to DOM manipulation in JavaScript.
Let's take a look at a piece of code --- wash the dirt
<html ng-app = "appModule">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
</head>
<body>
<span>count: {{count}}</span><br>
<input type="text" ng-model="city"/>{{city}}
</body>
<script type="text/javascript">
angular.module('appModule',[]).run(['$rootScope', function($rootScope) {
$rootScope.count = 0;
$rootScope.city = 'wuhan';
$rootScope.$watch('city', function() {
$rootScope.count++;
});
}]);
</script>
</html>
The change of the input box will trigger, and the count value is changed. The core code is: $rootScope.$watch('city', function() {$rootScope.count++;);
$watch is listening to the ordinary variable count worth changing, but what if the listening object is an array? What will happen?
<html ng-app = "appModule">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
</head>
<body>
<span>count: {{count}}</span>
<div ng-repeat="person in people">
<input type="text" ng-model="person.age"/>{{person.age}}
</div>
</body>
<script type="text/javascript">
angular.module('appModule',[]).run(['$rootScope', function($rootScope) {
$rootScope.count = 0;
$rootScope.people = [{"age":24}, {"age":25}, {"age":26}];
$rootScope.$watch('people', function() {
$rootScope.count++;
});
}]);
</script>
</html>
I'm very sorry, Input worth changing does not make count worth changing, why? The difference between monitoring a reference object and monitoring a basic object is that the default of monitoring a reference object is that as long as the monitored reference has not changed, even if the object pointed to by the reference has changed, it will be regarded as unchanged. So, how to do it, completely monitor it? That is, as long as there is even a little change in the monitored object, will the monitored object be triggered to act? Turn on the third property of $swatch(). Look at the code:
<html ng-app = "appModule">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
</head>
<body>
<span>count: {{count}}</span>
<div ng-repeat="person in people">
<input type="text" ng-model="person.age"/>{{person.age}}
</div>
</body>
<script type="text/javascript">
angular.module('appModule',[]).run(['$rootScope', function($rootScope) {
$rootScope.count = 0;
$rootScope.people = [{"age":24}, {"age":25}, {"age":26}];
$rootScope.$watch('people', function() {
$rootScope.count++;
}, true);
}]);
</script>
</html>
$rootScope.$watch('people', function() { $rootScope.count++;}, true);相比于
$rootScope.$watch('people', function() { $rootScope.count++;});多了true，此时开启了全面监控。或者说，深度监听。
最后一点：如何关闭监听呢？傻乎乎的你，也许会说，不监听那不就可以了吗，这叫无招胜有招。呵呵，万一，你遇到这样的需求呢？
在某些条件下，不必监听，而在另一些情况下，需要监听，那怎么办？其实也很简单。通过调用$rootScope.$watch的返回值就可以达到。
<html ng-app = "appModule">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
</head>
<body>
<span>count: {{count}}</span>
<div ng-repeat="person in people">
<input type="text" ng-model="person.age"/>{{person.age}}
</div>
</body>
<script type="text/javascript">
angular.module('appModule',[]).run(['$rootScope', function($rootScope) {
$rootScope.count = 0;
$rootScope.people = [{"age":24}, {"age":25}, {"age":26}];
var unableWatch = $rootScope.$watch('people', function() {
$rootScope.count++;
if ($rootScope.count > 9) {
unableWatch();
}
}, true);
}]);
</script>
</html>
======================未完待续===========================================