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 Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
React Native预设占位placeholder的使用
2017/09/28 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
汉语言文学毕业生求职信
2013/10/01 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
车间质检员岗位职责
2015/04/08 职场文书
可怜妈妈观后感
2015/06/09 职场文书
岁月神偷观后感
2015/06/11 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS