AngularJS 在同一个界面启动多个ng-app应用模块详解
AngularJS默认在一个html界面中只启动一个
ng-app模块，而且是界面中第一次出现的那个使用ng-app声明的模块，该问题可以通过查看AngularJS源代码或者是文档验证。
解决方案：
直接上代码，如果有兴趣了解其中缘由，可以选择阅读后面的部分；
<!DOCTYPEhtml>
<html>
<headlang="zh_CN">
<metacharset="UTF-8">
<title>AngularJSSourceCodeAnalysis</title>
<scriptsrc="source/angular.min.js"type="text/javascript"></script>
<scriptsrc="source/angular-route.min.js"type="text/javascript"></script>
</head>
<body>
<divng-app="myApp-0"ng-controller="nameCtrl">
<inputtype="text"ng-model="age"/>{{demo}}--{{age}}
<ul>
<ling-repeat="valinnames"ng-bind="val"></li>
</ul>
</div>
<!--并行启动多个ng-app-->
<divid="test-0"ng-controller="testCtrl_0">
<p>{{content.message}}</p>
</div>
<divid="test-1"ng-controller="testCtrl_1">
<p>{{content.message}}</p>
</div>
</body>
<script>
varmyApp_0=angular.module("myApp-0",[]);
myApp_0.controller('nameCtrl',function($scope,$rootScope){
$scope.names=["shen","amy","sereno"];
$scope.age=24;
$rootScope.demo="demo";
});
varmyApp_1=angular.module("myApp-1",[]);
myApp_1.controller('nameCtrl-1',function($scope,$rootScope){
$scope.names=["shen-1","amy-1","sereno-1"];
$rootScope.age=24;
});
//并行启动多个ng-app
varmyApp1mod=angular.module('test-0',[]);
myApp1mod.controller('testCtrl_0',function($scope){
varcontent={};
content.message="HelloTest-0";
$scope.content=content;
});
varmyApp2mod=angular.module('test-1',[]);
myApp2mod.controller('testCtrl_1',function($scope){
varcontent={};
content.message="HelloTest-1";
$scope.content=content;
});
angular.element(document).ready(
function(){
angular.bootstrap(document.getElementById("test-0"),["test-0"]);
angular.bootstrap(document.getElementById("test-1"),["test-1"]);
}
);
</script>
</html>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！