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


Posted in Javascript onDecember 20, 2016

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>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
canvas时钟效果
Feb 16 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 #Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 #Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 #Javascript
JS简单实现表格排序功能示例
Dec 20 #Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 #Javascript
js定时器实例分享
Dec 20 #Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 #Javascript
You might like
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
德劲1102收音机的打理维修案例
2021/03/02 无线电
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
如何通过命令行进入python
2020/07/06 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
创建索引时需要注意的事项
2013/05/13 面试题
入党申请书自我鉴定
2013/10/12 职场文书
护理专科自荐书范文
2014/02/18 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2015年调度员工作总结
2015/04/30 职场文书
关于环保的宣传稿
2015/07/23 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
关于MySQL中的 like操作符详情
2021/11/17 MySQL
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript
ant design vue的form表单取值方法
2022/06/01 Vue.js