angularJS 使用 bootstrap 进行手动加载方能实现一个页面多个ng-app

最新推荐文章于 2021-05-23 15:03:27 发布

xukung82

最新推荐文章于 2021-05-23 15:03:27 发布

阅读量229

点赞数

分类专栏：移动端开发

移动端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

点击打开链接

如果需要加载多个ng-app，需要手动加载，完整代码类似如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>sample</title>
	<script src="angular.js"></script>
</head>
<body>
	<div id="A1" ng-app="app1">
		<input ng-model="name" type="text" placeholder="请输入姓名">
		<p>我的姓名： {{name}}</p>
	</div>

	<div id="A2" ng-app="app2">
		<input ng-model="age" type="number" placeholder="请输入年龄">
		<p>我的年龄: {{age}}</p>
	</div>

	<script type="text/javascript">
		var app1 = angular.module("app1",[]);
		var app2 = angular.module("app2",[]);

		angular.bootstrap(document.getElementById("A2"),['app2']);
	</script>
</body>
</html>