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 ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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
Yii中的cookie的发送和读取
2016/07/27 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python打包成so文件过程解析
2019/09/28 Python
python编写微信公众号首图思路详解
2019/12/13 Python
Python实现密码薄文件读写操作
2019/12/16 Python
python代码xml转txt实例
2020/03/10 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
平面设计的岗位职责
2013/11/08 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
会走路的树教学反思
2014/02/20 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
《迟到》教学反思
2016/02/24 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android