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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 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
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php获取某个目录大小的代码
2008/09/10 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
php object转数组示例
2014/01/15 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
Yii中表单用法实例详解
2016/01/05 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
简单介绍Python中的RSS处理
2015/04/13 Python
Python中import机制详解
2017/11/14 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
积极贯彻学习两会精神总结
2014/03/17 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
个人向公司借款协议书
2016/03/19 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
python实现黄金分割法的示例代码
2021/04/28 Python