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 相关文章推荐
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
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利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
动态加载js文件 document.createElement
2006/10/14 Javascript
jquery text()要注意啦
2009/10/30 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python中的类学习笔记
2014/09/23 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python3 使用traceback定位异常实例
2020/03/09 Python
python 6种方法实现单例模式
2020/12/15 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
护士个人简历自荐信
2013/10/18 职场文书
营业员个人总结的自我评价
2013/10/25 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
研讨会主持词
2014/04/02 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
刑事法律意见书
2015/06/04 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
golang为什么要统一错误处理
2022/04/03 Golang