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下通过getList函数实现分页效果的代码
Sep 17 Javascript
使用console进行性能测试
Apr 27 Javascript
jQuery.each使用详解
Jul 07 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
php生成4位数字验证码的实现代码
2015/11/23 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
Python中的filter()函数的用法
2015/04/27 Python
python黑魔法之编码转换
2016/01/25 Python
Python从零开始创建区块链
2018/03/06 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
python 构造三维全零数组的方法
2018/11/12 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Python字典实现伪切片功能
2020/10/28 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
教师师德反思材料
2014/02/15 职场文书
Python集合的基础操作
2021/11/01 Python