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 相关文章推荐
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
JS实现横向跑马灯效果代码
Apr 20 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
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
python3 读写文件换行符的方法
2018/04/09 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
windows下python安装小白入门教程
2018/09/18 Python
浅析python参数的知识点
2018/12/10 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
django 类视图的使用方法详解
2019/07/24 Python
python无序链表删除重复项的方法
2020/01/17 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
综合测评自我鉴定
2013/10/08 职场文书
医学生求职自荐信
2013/10/25 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
课外活动总结范文
2014/07/09 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
人生感悟经典句子
2019/08/20 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Nginx四层负载均衡的配置指南
2021/06/11 Servers