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 相关文章推荐
JavaScript对象反射用法实例
Apr 17 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 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
php4的session功能评述(一)
2006/10/09 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Python字符串匹配算法KMP实例
2015/07/18 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
python redis存入字典序列化存储教程
2020/07/16 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
运动会闭幕式解说词
2014/02/21 职场文书
统计系教授推荐信
2014/02/28 职场文书
社会发展项目建议书
2014/08/25 职场文书
房产证明范本
2015/06/19 职场文书
关于幸福的感言
2015/08/03 职场文书
2016党校学习心得体会
2016/01/07 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL