JavaScript框架之AngularJS学习——作用域与事件（中）-CSDN博客

本文链接：https://blog.csdn.net/chen_XiaoMing123/article/details/78153737

AngularJS学习——作用域与事件

4.$apply与$digest应用

上集中讲到，当AngularJS作用域中的模型数据发生变化时，AngularJS会自动触发$digest循环，从而达到自动更新视图的目的。

有些情况则需要我们手动调用$apply()方法来触发$digest循环。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$aaply与$digest应用实战</title>
	<script src="../lib/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
	<div>
		<button ng-click="scheduleTask()">3秒后回显信息</button>
	</div>
	<div>
		{{ message }}
	</div>
	<script>
		angular.module("myApp",[])
			.controller("myCtrl",["$scope",function($scope){
				$scope.scheduleTask = function(){
					// 使用的是JS方法setTimeout
					setTimeout(function(){
						$scope.message = "信息内容";
						console.log("message="+$scope.message);
					},3000)
				}
			}])
	</script>
</body>
</html>

上面例子中，虽然能够在控制太重输出"message=信息内容"，但是在页面中并不会显示"信息内容"，即不会回显任何内容。因为在这种情况下，AngularJS框架无法自动触发$digest循环，需要我们调用$apply()方法来触发$digest循环。

$apply()方法接收一个方法作为参数。

对以上代码的<script></script>部分进行修改，如下：

eg:

angular.module("myApp",[])
	.controller("myCtrl",["$scope",function($scope){
		$scope.scheduleTask = function(){
			setInterval(function(){
				$scope.$apply(function(){
				$scope.message = "信息内容";
				console.log('message = '+ $scope.message);
				})
			},3000);
		}
	}])

修改之后的程序，可以在控制台和页面中输出相关内容则说明调用$apply()方法触发$digest循环成功。

可以尝试将以上setTimeout()替换成setInterval()来进行试验。这两种方法都需要手动调用$apply()方法触发$digest循环。

使用AngularJS内置的指令或服务通常不需要我们手动调用$apply()方法触发$digest循环。

AngularJS为我们提供了两种类似JS的服务——$timeout和$interval。这两个服务在修改作用域属性时会自动触发$digest循环。

使用AngularJS内置服务修改以上例子：

eg:

angular.module("myApp",[])
	// 相关的$timeout服务要注入控制器中
	.controller("myCtrl", ["$scope", "$timeout", function($scope, $tiemout){
		$scope.scheduleTask = function(){
			// 使用AngularJS内置$tiemout服务
			$tiemout(function(){
				$scope.message = "信息内容";
				console.log("message = " + $scope.message);
			},3000)
		}
	}])

修改之后不需要手动调用$apply()方法自动触发$digest循环。执行效果相同。

以上笔记整理自个人学习，用做个人学习分享