当前位置: 首页 > 工具软件 > ng-deerway > 使用案例 >

ng-show和ng-if的区别

茅星雨
2023-12-01


学习资源推荐: https://blog.csdn.net/qq_42813491/article/details/90213353

简单比较

共同点: 都是判断性的指令,里边可以是简单的表达式,返回结果是布尔类型的值
不同点:

  • ng-show是css层面的元素显示与隐藏,不会引发浏览器的回流,仅仅是视图的重绘;
  • 相反的,ng-if是dom层面的上下树,不仅仅是视图的重绘,还会引发浏览器的回流,所以会重新实例化控制器

代码

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
	<meta charset="UTF-8">
	<title>ng-if与ng-show</title>
	<style type="text/css">
	section{text-align: center;}
		div{
			background-color: gold;
			width:100px;
			height:100px;
			margin:0 auto;
		}
	</style>
</head>
<body>
	<section ng-controller="MainCtrl as mainctrl">
		<input type="button" value="按我" ng-click="mainctrl.changeShow()">
		<div ng-controller="SubCtrl as subctrl" ng-show="mainctrl.isShow">你好</div>
	</section>

	<script type="text/javascript" src="angular.min.js"></script>
	<script type="text/javascript">
		//创建一个module
		var myapp = angular.module("myapp",[]);
		//控制器
		myapp.controller("MainCtrl",[function(){
			this.isShow = true;

			var self = this;
			this.changeShow = function(){
				self.isShow = !self.isShow;
			}
		}]);

		myapp.controller("SubCtrl",[function(){
			alert("我是SubCtrl,我被实例化了!");
		}]);
	</script>
</body>
</html>

代码解释

  • 上述代码运行的时候子控制器就会被实例化一次,页面弹窗我是SubCtrl,我被实例化了!
  • 使用的指令为ng-show的时候,点击按钮,切换显示状态,子控制器不会再度被实例化
  • 使用的指令为ng-if的时候,点击按钮,切换显示状态,因为之前已经下dom树了,子控制器会再度被实例化,所以会再度弹窗
 类似资料: