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 相关文章推荐
关于query Javascript CSS Selector engine
Apr 12 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
JavaScript作用域链示例分享
May 27 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
JS中offset和匀速动画详解
Feb 06 Javascript
Vue实现简单分页器
Dec 29 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
Vue基于localStorage存储信息代码实例
Nov 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
sphinx增量索引的一个问题
2011/06/14 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
举例区分Python中的浅复制与深复制
2015/07/02 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
深入理解Django的自定义过滤器
2017/10/17 Python
python 循环数据赋值实例
2019/12/02 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
python程序需要编译吗
2020/06/19 Python
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
高三毕业评语
2014/12/31 职场文书
党员个人自我评价
2015/03/03 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
python状态机transitions库详解
2021/06/02 Python
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
详解JAVA的控制语句
2021/11/11 Java/Android
关于vue-router-link选择样式设置
2022/04/30 Vue.js