$scope.$apply() 按需要强制渲染前端页面

最新推荐文章于 2024-03-29 08:20:36 发布

程序媛~婷

最新推荐文章于 2024-03-29 08:20:36 发布

阅读量8.1k

点赞数 1

分类专栏： Angular 文章标签： angularJS强制重新渲染DOM

本文链接：https://blog.csdn.net/litingyuki/article/details/83692710

版权

Angular 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

虽然angularJS可以实现双向数据绑定，但有时，数据发生改变的时候前端页面展示的信息并不会更新，这时就可以借助$scope.$apply() 强制重新渲染。

见小案例：

<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>$scope.$apply()</title>
<script src="../js/angular.min.js"></script>
<script>

function Aaa($scope){
	$scope.name = 'hello';
	setTimeout(function(){
		$scope.$apply(function(){
			$scope.name = 'hi';
		});
	},2000);		
}

</script>
</head>

<body>

<div ng-controller="Aaa" >
	<p>{{name}}</p>
</div>

</body>
</html>

本例的其他实现方式有，通过$timeout 实现 2s 后 "hello"刷新为“hi”.

<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>$scope.$apply()</title>
<script src="../js/angular.min.js"></script>
<script>

function Aaa($scope,$timeout){
	$scope.name = 'hello';

	$timeout(function(){
		$scope.name = 'hi';
	},2000);
	

	
}

</script>
</head>

<body>

<div ng-controller="Aaa" >
	<p>{{name}}</p>
</div>

</body>
</html>

通过触发时间实现 "hello"刷新为“hi”.

<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>$scope.$apply()</title>
<script src="../js/angular.min.js"></script>
<script>

function Aaa($scope,$timeout){
	$scope.name = 'hello';
	$scope.show = function(){
		$scope.name = 'hi';
	};
	
}

</script>
</head>
<body>
<div ng-controller="Aaa" ng-click="show()">
	<p>{{name}}</p>
</div>

</body>
</html>

程序媛~婷

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
$scope.$apply() 按需要强制渲染前端页面

虽然angularJS可以实现双向数据绑定，但有时，数据发生改变的时候前端页面展示的信息并不会更新，这时就可以借助$scope.$apply() 强制重新渲染。见小案例：&lt;!DOCTYPE HTML&gt;&lt;html ng-app&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; ...
复制链接

扫一扫