Angular之$apply和$digest

apply digest在angularjs中是两个核心概念,上篇探讨完$watch方法,作用主要用来监听数据的变化,并作出相应的反应,并且更新VIEW,但是还有一个问题,angular是如何知道数据发生了变化?
angular内置了 digestscope 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>

猜你喜欢

转载自blog.csdn.net/Efficiency9/article/details/76264492