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

最新推荐文章于 2023-11-11 05:00:00 发布

程序媛~婷

最新推荐文章于 2023-11-11 05:00:00 发布

阅读量8.3k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/litingyuki/article/details/83692710

Angular 专栏收录该内容

9 篇文章

订阅专栏

虽然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>