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实现存储hmtl字符串示例
Apr 25 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
Vue中keep-alive组件的深入理解
Aug 23 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数组添加元素方法小结
2014/12/20 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
动态加载js的几种方法
2006/10/23 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
python对视频画框标记后保存的方法
2018/12/07 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
Python json转字典字符方法实例解析
2020/04/13 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
详解Python设计模式之策略模式
2020/06/15 Python
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
优秀中专生推荐信
2013/11/17 职场文书
阿德的梦教学反思
2014/02/06 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
大学校务公开实施方案
2014/03/31 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
英语辞职信怎么写
2015/02/28 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
在 Python 中利用 Pool 进行多线程
2022/04/24 Python
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL