ng-show和ng-if的区别

原创

冷月心_bytedance 2022-01-21 11:39:29 博主文章分类：angular ©著作权

文章标签 ng-show ng-if angular 实例化 html 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者冷月心_bytedance的原创作品，请联系作者获取转载授权，否则将追究法律责任

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>