28、AngularJs使用$scope.$apply()进行数据脏检查

阅读() @2018-10-29 18:16:10

$apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如,假设你实现了一个setTimeout()或者使用第三方库并且想让事件运行在Angular上下文内部时,就必须使用$apply()。

简而言之,使用$scope.$apply()时可以从外部进入上下文。如果在事件被触发时调用$apply(),就会使用Angular事件循环来运行它。如果没有调用$apply(),就不会在事件循环内执行这个函数,而它会运行在Angular上下文外部。

何时使用$apply?

通常可以依赖于Angular提供的可用于视图中的任意指令来调用$apply()。所有ng-[event]。

指令(比如ng-click、ng-keypress)都会调用$apply()。

此外还可以依赖于一系列Angular内置的服务来调用$digest()。比如$http服务会在XHR请求完成并触发更新返回值(promise)之后调用$apply()。

无论何时我们手动处理事件,使用第三方框架(比如jQuery、Facebook API),或者调用setTimeout(),都可以使用$apply()函数让Angular返回$digest循环。

当我们将jQuery和Angular集成在一起时(这通常被视为一个肮脏的行为),就需要使用$apply(),因为Angular不会察觉到执行在Angular上下文外部的事件。例如,在使用jQuery时(比如click事件),就需要使用$apply()将来自jQuery的事件传递到Angular应用中。

如何使用$apply?

在下面这段代码中,点击【按钮一】可以看到我们理想中的效果,这一点确定无疑;但是点击【按钮二】,如果没有$scope.$apply()这段代码,就执行不下去。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$scope.$apply()进行数据脏检查</title>
	<style type="text/css">
		.ng-cloak{display:none;}
	</style>
</head>
<body ng-app="app" ng-controller="ctr" ng-cloak class="ng-clock">
	{{name}}
	<button ng-click="func();">按钮一</button>
	<hr>
	<button id="btn">按钮二</button>
</body>
</html>
<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctr', ['$scope', function($scope){
		$scope.name = '赵一鸣';
		/*$scope.func = function(){
			$scope.name = '赵一鸣个人技术博客';
		}*/
		$('#btn').click(function(){
			$scope.name = '赵一鸣AngularJs学习笔记';
			$scope.$apply();
		});
	}]);
</script>

以上就是$apply的作用。

微信二维码