Angular之$apply和$digest

最新推荐文章于 2019-11-17 14:50:02 发布

EffIdong

最新推荐文章于 2019-11-17 14:50:02 发布

阅读量386

点赞数

分类专栏： angularjs 文章标签： angular

本文链接：https://blog.csdn.net/Efficiency9/article/details/76264492

版权

angularjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

$apply和$ digest在angularjs中是两个核心概念，上篇探讨完$watch方法，作用主要用来监听数据的变化，并作出相应的反应，并且更新VIEW，但是还有一个问题，angular是如何知道数据发生了变化？
angular内置了 $digest循环，他会周期性的检查scope模型中的数据是否发生变化，在$ digest循环中，watcher监听会被触发，然后开始监听scope模型，angular往往会自动出发 $digest循环，从而达到自动更新视图的目的，还有一个问题需要注意的是，在手动触发时中，我们并不会直接调用$ digest（）方法，而是使用 $scope.$ apply()，该方法会调用 $rootScope.$ digest().
有些情况下，模型数据修改之后許他要我们手动调用 $apply()方法，例如setTimeout（）方法，框架不会执行$ digest循环。这时，我们应该采取以下方法

<!DOCTYPE html>
<html lang="en" ng-app="msgMoudle">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../angular.min.js"></script>
</head>
<body>
<div ng-controller="MsgController">
    <button ng-click="scheduleTtask()">3秒后回显消息</button>
    <div>{{message}}</div>
</div>
<script>
    var msgMoudle=angular.module('msgMoudle',[]);
    msgMoudle.controller('MsgController',function ($scope) {
        $scope.scheduleTtask=function () {
            setTimeout(function () {
//              在setTimeout（）内部使用$apply方法
                $scope.$apply(function(){
                    $scope.message='信息内容';
                    console.log('messeage='+$scope.message);
                })
            },3000)
        }
    })
</script>
</body>
</html>

也就是说，当我们每次使用setTimeoit()和setInterval()方法时，都有手动去出发$digest方法，显得有点麻烦，因此框架给我们提供了两个相同功能的服务

$timeout()
$interval()

<!DOCTYPE html>
<html lang="en" ng-app="msgMoudle">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../angular.min.js"></script>
</head>
<body>
<div ng-controller="MsgController">
    <button ng-click="scheduleTtask()">3秒后回显消息</button>
    <div>{{message}}</div>
</div>
<script>
    var msgMoudle=angular.module('msgMoudle',[]);
//  需要先在此处传入$timeout参数
    msgMoudle.controller('MsgController',function ($scope,$timeout) {
        $scope.scheduleTtask=function () {
            $timeout(function () {
                    $scope.message='信息内容';
                    console.log('messeage='+$scope.message);
            },3000)
        }
    })
</script>
</body>
</html>