AngularJS中$watch方法监听作用域 --- 普通变量监听和对象监听的区别

《开经偈》

无上甚深微妙法

百千万劫难遭遇

我今见闻得受持

愿解如来真实义

之前学过ng-model，现在学习$swatch,感觉在概念上区分不开这两者的关系。ng-model用于视图和作用域之间数据的同步，问题是，既然是同步，那么肯定涉及监听，A的变化被B监测到，B也做出改变。但是B的改变是限定死的，即必须和A保持一致。问题是，如果B想做出的改变不是和A保持一致呢？这怎么办？ng-model满足不了需求。所以，$swatch()诞生了。$swatch()和JavaScript中的DOM操作十分相似。

稍显来看一段代码 --- 洗洗尘垢

<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>

输入框的改变会触发，count值得改变。核心代码在于：$rootScope.$watch('city', function() {$rootScope.count++;);

$watch此时监听的是普通变量count值得变化，但是如果监听的对象是数组呢？又会如何？

扫描二维码关注公众号，回复： 161258 查看本文章

<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>

十分抱歉，Input值得改变并不会导致count值得改变，为啥呢？监听引用对象和监听基本对象是由区别的，区别就在于监听引用对象的默认是只要被监听的引用没有改变，那么就算引用所指向的对象发生了改变也当作没有改变。那么，怎样做到，完全地监听呢？即只要被监听对象内发生哪怕一丁点改变，就会触发监听对象发生动作呢？开启$swatch()的第三个属性。看代码：

<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>

======================未完待续===========================================

AngularJS中$watch方法监听作用域 --- 普通变量监听和对象监听的区别

猜你喜欢