AngularJS如何在同一个界面启动多个ng-app应用模块

最新推荐文章于 2021-06-19 04:38:45 发布

SerenoShen

最新推荐文章于 2021-06-19 04:38:45 发布

阅读量9.2k

点赞数 4

分类专栏： JavaScript开发+学习记录

本文链接：https://blog.csdn.net/shenlei19911210/article/details/50848087

版权

JavaScript开发+学习记录专栏收录该内容

68 篇文章 0 订阅

订阅专栏

AngularJS默认在一个html界面中只启动一个 ng-app 模块，而且是界面中第一次出现的那个使用 ng-app 声明的模块，该问题可以通过查看AngularJS源代码或者是文档验证。

解决方案：

直接上代码，如果有兴趣了解其中缘由，可以选择阅读后面的部分；

<!DOCTYPE html>
<html>
<head lang="zh_CN">
 <meta charset="UTF-8">
 <title>AngularJS Source Code Analysis</title>
 <script src="source/angular.min.js" type="text/javascript"></script>
 <script src="source/angular-route.min.js" type="text/javascript"></script>
</head>
<body>
 <div ng-app="myApp-0" ng-controller="nameCtrl">
  <input type="text" ng-model="age"/>{{ demo }}--{{ age }}
  <ul>
   <li ng-repeat="val in names" ng-bind="val"></li>
  </ul>
 </div>

 <!-- 并行启动多个ng-app -->
 <div id="test-0"  ng-controller="testCtrl_0">
  <p>{{content.message}}</p>
 </div>
 <div id="test-1" ng-controller="testCtrl_1">
  <p>{{content.message}}</p>
 </div>
</body>
<script>
 var myApp_0 = angular.module("myApp-0", []);
 myApp_0.controller('nameCtrl', function ($scope, $rootScope){
  $scope.names = ["shen", "amy", "sereno"];
  $scope.age = 24;
  $rootScope.demo = "demo";
 });

 var myApp_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
 var myApp1mod = angular.module('test-0',[]);
 myApp1mod.controller('testCtrl_0',function($scope){
  var content= {};
  content.message = "Hello Test-0";
  $scope.content= content;
 });

 var myApp2mod = angular.module('test-1',[]);
 myApp2mod.controller('testCtrl_1',function($scope){
  var content= {};
  content.message = "Hello Test-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>