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加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python中pillow知识点学习
2018/04/30 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
python如何导入依赖包
2020/07/13 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
某科技软件测试面试题
2013/05/19 面试题
同事打架检讨书
2014/02/04 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
实验室的标语
2014/06/20 职场文书
励志演讲稿800字
2014/08/21 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
中学生运动会广播稿
2015/08/19 职场文书