爲何AngularJs寫了2個及以上的ng-app=""會致使頁面渲染不成功

時間 2019-11-10

標籤爲何 angularjs 寫了以上 app 致使頁面渲染不成功欄目 AngularJS 简体版

原文原文鏈接

當代碼是這樣的時候，頁面正確渲染：javascript

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>AngularJs學習(13)</title>
</head>
<body>
<h1>AngularJS HTML DOM</h1><br/>
<h2>ng-disabled 指令</h2>
<div ng-app="" ng-init="mySwitch=true">
	<input type="checkbox" ng-model="mySwitch">
	<p>{{ mySwitch}}</p>
	<button ng-disabled="mySwitch">點我</button>
</div><br/>

<!-- 直接引用別的網站託管的angularjs -->
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.4/angular.min.js" ></script>
<script type="text/javascript">

</script>
</body>
</html>

效果：css

當代碼是這樣的時候：html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>AngularJs學習(13)</title>
</head>
<body>
<h1>AngularJS HTML DOM</h1><br/>
<h2>ng-disabled 指令</h2>
<div ng-app="" ng-init="mySwitch=true">
	<input type="checkbox" ng-model="mySwitch">
	<p>{{ mySwitch}}</p>
	<button ng-disabled="true">點我</button>
</div><br/>

<h2>ng-show 指令</h2>
<div ng-app="app2" id="app2">
	<p ng-show="true">我是可見的</p>
	<p ng-show="false">我是不可見的</p>
	
</div>



<!-- 直接引用別的網站託管的angularjs -->
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.4/angular.min.js" ></script>
<script type="text/javascript">

</script>
</body>
</html>

頁面效果：java

緣由：angularjs

AngularJs默認只加載一個ng-app，而且是第一個。bootstrap

解決方法：app

若是須要加載多個ng-app，須要手動加載，代碼以下：學習

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>AngularJs學習(13)</title>
</head>
<body>
<h1>AngularJS HTML DOM</h1><br/>
<h2>ng-disabled 指令</h2>
<div ng-app="" ng-init="mySwitch=true">
	<input type="checkbox" ng-model="mySwitch">
	<p>{{ mySwitch}}</p>
	<button ng-disabled="true">點我</button>
</div><br/>

<h2>ng-show 指令</h2>
<div ng-app="app2" id="app2">
	<p ng-show="true">我是可見的</p>
	<p ng-show="false">我是不可見的</p>
	
</div>



<!-- 直接引用別的網站託管的angularjs -->
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.4/angular.min.js" ></script>
<script type="text/javascript">
//手動加載app2
var app1 = angular.module("app1",[]);
var app2 = angular.module("app2", []);
angular.bootstrap(document.getElementById("app2"),['app2']);
</script>
</body>
</html>

相關標籤/搜索

每日一句

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