为何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>