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中$.post()方法的简单实例
Feb 04 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
js密码强度检测
Jan 07 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php fckeditor 调用的函数
2009/06/21 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
js option删除代码集合
2008/11/12 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
原生js开发的日历插件
2017/02/04 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
django数据库自动重连的方法实例
2019/07/21 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
数据库基础的一些面试题
2012/02/25 面试题
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
员工团队活动方案
2014/08/28 职场文书
就业证明函
2015/06/17 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书