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如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
vue编写简单的购物车功能
Jan 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
用PHP4访问Oracle815
2006/10/09 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
为数据添加append,remove功能
2006/10/03 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
django2笔记之路由path语法的实现
2019/07/17 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
override和overload的区别
2016/03/09 面试题
意向书范文
2014/03/31 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
售票员岗位职责
2015/02/15 职场文书
学困生转化工作总结
2015/08/13 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python