从零学习Angularjs-watch、digest、apply三大方法解析

AngularJS核心概念解析

最新推荐文章于 2024-12-03 17:46:38 发布

不止会New

最新推荐文章于 2024-12-03 17:46:38 发布

阅读量466

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术

本文链接：https://blog.youkuaiyun.com/ff906317011/article/details/79451199

前端技术专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了AngularJS中watch、digest和apply三个关键方法的工作原理及应用场景，通过具体实例帮助理解这些方法之间的联系。

在我们使用Angularjs时，时常会遇到watch、digest、apply这三个方法，博主也是查了很多资料在这里简单的介绍一下这三个方法的使用。

$watch方法

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。$ watch(watchExpression, listener, objectEquality);
每个参数的说明如下：
watchExpression（必须）：监听的对象，它可以是一个string，将被计算为表达式 ,或函数如function(){return $scope.name}。 listener:当watchExpression（监听对象）变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用) objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。

$digest方法

$digest：Angular会运行一个函数$ digest来检查scope模型中的数据是否发生了变化。在 $digest循环中，watchers会被触发。当一个watcher被触发时，AngularJS会检测它所监听的scope模型，如果监听对象发生了变化那么关联到该watcher的回调函数就会被调用。这种方法叫做脏检查。在angular程序初始化时，会将绑定对象的属性添加为监听对象（watcher），也就是说一个$ scope对象绑定了N个属性，就会添加N个watcher。 angular什么时候去脏检查呢？angular所定义的方法中都会触发 $digest事件，比如：controller初始化的时候，所有以ng-开头的指令执行后，都会触发脏检查用户与视图发生交互行为以后会触发脏检查。调用$ digest方法： $scope.$ digest();

$apply方法

apply:AngularJS并不直接调用digest()，而是调用scope, apply()，apply方法就是将digest方法包装了一层，会调用rootScope.digest()。

因此，一轮digest循环在rootScope开始，随后会访问到所有的children scope中的watchers。 apply()方法接受一个可选参数，可以是string，string将被看作表达式并计算结果，也可以是函数。

当接受function作为参数，会执行该function并且触发一轮digest循环。不接受任何参数，触发一轮digest循环会，检查该scope里的所有监听的属性。如果你在AngularJS上下文之外的任何地方修改了model，那么你就需要通过手动调用apply()来通知AngularJS。

三者关系整合例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行程安排</title>
    <link href="../css/bootstrap.css" rel="stylesheet">
    <script src="../script/angular.min.js"></script>
    <script>
        var app = angular.module('myapp', []);
        app.controller("myController", function ($scope) {
            $scope.message = '原来的信息';
            $scope.getMessage = function(){
                setTimeout(function(){
            //message刚开始不是监听对象，对它加上$scope.$apply后才可以监听
                    $scope.$apply(function () {
                        $scope.message = '两秒后更新';
                        alert('message'+$scope.message);
                    });
                    //$scope.$apply();
                },2000)
            }
            $scope.getMessage();
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myController">
{{message}}
</body>
</html>