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 数组的方法集合
Jun 05 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
吃通javascript正则表达式
Apr 21 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
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
PHP实现的json类实例
2015/07/28 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
python创建文件备份的脚本
2018/09/11 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
档案管理员岗位职责
2013/12/01 职场文书
建筑人员岗位职责
2013/12/25 职场文书
企业职业病防治方案
2014/05/29 职场文书
个人融资协议书
2014/10/02 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP