ng-show和ng-if的区别
区别 if NG show
2023-09-27 14:26:51 时间
学习资源推荐: 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树了,子控制器会再度被实例化,所以会再度弹窗
相关文章
- git revert和reset区别
- js中callback.call()和callback()的区别
- python if elif else 区别
- Java SE之快速失败(Fast-Fail)与快速安全(Fast-Safe)的区别[集合与多线程/增强For](彻底详解)
- Restful风格API中用put还是post做新增操作有什么区别?
- vue中v-show与v-if的区别
- git tag 和 branch 的区别以及使用场景
- v-if和v-show的区别
- 嵌入式OPC UA网关与传统OPC软件的区别
- Ribbon和Nginx的区别
- 志强处理器结尾的ES、QS、正式版的区别
- python - if和elif的区别
- kubectl create 和 kubectl apply区别