Angular在一个页面中使用两个ng-app的方法


Posted in Javascript onFebruary 20, 2017

下面一段代码给大家介绍了Angular在一个页面中使用两个ng-app的方法,具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title>
 </head>
 <body>
  <input type="button" ng-app="myApp1" ng-controller="App1Controller" ng-click="do1()" value="按钮1" />
  <input type="button" ng-app="myApp2" ng-controller="App2Controller" ng-click="do2()" value="按钮2">
  <script src="bower_components/angular/angular.js"></script>
  <script>
  /**
  * myApp1 Module
  *
  * Description
  */
  var myApp1 = angular.module('myApp1', []);
  myApp1.controller('App1Controller', ['$scope', function($scope){
   $scope.do1 = function(){
    console.log(11111);
   };
  }]);
  var myApp2 = angular.module('myApp2', []);
  myApp2.controller('App2Controller', ['$scope', function($scope){
   $scope.do2 = function(){
    console.log(22222);
   };
  }]);
  //手动的让第二个div被myapp2管理
  angular.bootstrap(document.querySelector('[ng-app="myApp2"]'), ['myApp2']);
  </script>
 </body>
</html>

这种方法不推荐,请参考下篇文章。下面给大家介绍angular在一个页面中使用两个ng-app的方法(二)。敬请关注!

Javascript 相关文章推荐
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
js图片处理示例代码
May 12 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 #Javascript
ES6中Math对象的部分扩展
Feb 20 #Javascript
微信小程序左滑删除效果的实现代码
Feb 20 #Javascript
JavaScript轮播图简单制作方法
Feb 20 #Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 #Javascript
原生js实现放大镜
Feb 20 #Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 #Javascript
You might like
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
详解python中的json的基本使用方法
2016/12/21 Python
简单实现python画圆功能
2018/01/25 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
python中的逆序遍历实例
2019/12/25 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
params有什么用
2016/03/01 面试题
项目施工员岗位职责
2014/03/09 职场文书
质量保证书格式模板
2015/02/27 职场文书
交通安全主题班会
2015/08/12 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python