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对象的property和prototype是什么一种关系
Aug 06 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 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
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
大家未必知道的Js技巧收藏
2008/04/07 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python定时任务 sched模块用法实例
2019/11/04 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Python装饰器结合递归原理解析
2020/07/02 Python
文明宿舍获奖感言
2014/02/07 职场文书
生产文员岗位职责
2014/04/05 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
企业团队精神心得体会
2016/01/19 职场文书
工伤调解协议书
2016/03/21 职场文书
导游词之山海关
2019/12/10 职场文书
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫