您的位置：首页 > Web前端 > AngularJS

angularjs ng-if ng-show ng-hide区别

2016-05-03 17:53 761 查看

在使用anularjs开发前端页面时，常常使用ng-show、ng-hide、ng-if功能来控制页面元素的显示或隐藏，那他们之间有什么不同呢？

实现原理方面：ng-show/ng-hide是通过修改CSS样式方式控制元素显示与隐藏，对应的DOM元素会一直存在于当前页面中，而ng-if根据表达式的值动态的在当前的页面中添加删除页面元素。如果赋值表达式的值为false，那么这个元素就会从页面中删除，否则会添加一个元素。ng-if创建元素时用的是被它编译后的代码，如果ng-if内部的代码被其它方式修改过，那么修改只会对本次展现有效，页面元素重新渲染后修改效果会消失，而ng-show/ng-hide则能够保留dom元素上次修改后的状态。

在作用域方面，两者也存在差异：当一个元素被ng-if从DOM中删除时，与其关联的作用域也会被销毁。而且当它重新加入DOM中时，则会生成一个新的作用域，而ng-show和ng-hide则不会。

通过如下代码并结合浏览器开发者工具可以清楚的看出二者之间的不同：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ng-if ng-show ng-hide</title>
<script type="text/javascript" class="library" src="http://libs.useso.com/js/angular.js/1.2.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div ng-show="false">
ng-show = false
</div>
<div ng-show="true">
ng-show=true
</div>
<div ng-if="true">
ng-if = true
</div>
<div ng-if="false">
ng-if = false
</div>
</div>
</body>
</html>

angular.module("app",[]).controller("MainCtrl",function($scope){
});

页面最终的HTML片断如下：

<div ng-controller="MainCtrl" class="ng-scope">
<div ng-show="false" class="ng-hide">
ng-show = false
</div>
<div ng-show="true" class="">
ng-show=true
</div>
<!-- ngIf: true --><div ng-if="true" class="ng-scope">
ng-if = true
</div><!-- end ngIf: true -->
<!-- ngIf: false -->
</div>

（转）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航