ng-show和ng-if的区别
-
- 简单比较
- 代码
- 代码解释
简单比较
共同点: 都是判断性的指令,里边可以是简单的表达式,返回结果是布尔类型的值
不同点:
- 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树了,子控制器会再度被实例化,所以会再度弹窗