[AngularJS] 一个页面拥有多个ng-app
2018-04-16 本文已影响15人
Belmode
Html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/lib/mins/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<!-- ng-init初始化测试 -->
<div ng-init="person={'name':'AJack','gender':'男'}"></div>
<p>姓名:{{person.name}}</p>
<p>性别:{{person.gender}}</p>
</div>
<div ng-app="myApp2" id="myApp2">
<!-- ng-init初始化测试 -->
<div ng-init="person={'name':'AJack','gender':'男'}"></div>
<p>姓名:{{person.name}}</p>
<p>性别:{{person.gender}}</p>
</div>
<script src="/lib/modules/myApp.js"></script>
</body>
</html>
JS文件
var app = angular.module('myApp', []);
var app2 = angular.module('myApp2', []);
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('myApp2'),['myApp2']);
});
效果:
![](https://img.haomeiwen.com/i8263107/65620912fc6fc431.png)
![](https://img.haomeiwen.com/i8263107/efa5b2f107d8f5a5.png)
myApp和myApp2均加载成功