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 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 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调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
javascript实现拖放效果
2015/12/16 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
python自动格式化json文件的方法
2015/03/11 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
简单了解python模块概念
2018/01/11 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
浅谈python之新式类
2018/08/12 Python
python实现简单加密解密机制
2019/03/19 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
幼儿园教师培训制度
2014/01/16 职场文书
文艺晚会开场白
2015/05/29 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
八年级作文之友谊
2019/12/02 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
python中pymysql包操作数据库方法
2022/04/19 Python