在使用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>
js
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>
（轉）