ng-show和ng-if的區別

時間 2019-11-19

標籤區別简体版

原文原文鏈接

第一點區別是，
ng-if 在後面表達式爲 true 的時候才建立這個 dom 節點，
ng-show 是初始時就建立了，用display:block 和 display:none 來控制顯示和不顯示。html

第二點區別是，
ng-if 會（隱式地）產生新做用域，ng-switch 、 ng-include 等會動態建立一塊界面的也是如此。
這樣會致使，在 ng-if 中用基本變量綁定 ng-model，並在外層 div 中把此 model 綁定給另外一個顯示區域，內層改變時，外層不會同步改變，由於此時已是兩個變量了。app

針對第二點，若是想傳遞給外層的model，則在ng-if的ng-model中加一個$parent便可，以下：dom

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl">
	「父級」環境
	<input type="text" ng-model="parentVal"><br><br><br><br>
	<div ng-if="parentVal == 'a'" style="border:1px solid #ccc;width:200px;height:200px;margin:20px">
		"子"環境
		<input type="text" ng-model="childVal"></br>
		內層顯示ng-if的model： {{childVal}}
	</div>
	
	在外層顯示ng-if中的model： {{childVal}}
	

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    
});
</script>

</body>
</html>

參考網址：http://blog.csdn.net/sinat_31057219/article/details/60780479spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。