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 语言的递归编程
May 18 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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 数字左侧自动补0
2008/03/31 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
老生常谈Python基础之字符编码
2017/06/14 Python
python实现趣味图片字符化
2019/04/30 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
python 获取字典键值对的实现
2020/11/12 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
低碳环保口号
2014/06/12 职场文书
导航工程专业自荐信
2014/09/02 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
员工手册编写范本
2015/05/14 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
Rust中的Struct使用示例详解
2022/08/14 Javascript