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 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
js querySelector() 使用方法
Dec 21 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
JS sort排序详细使用方法示例解析
Sep 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
PHP关联链接常用代码
2012/11/05 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
validator验证控件使用代码
2010/11/23 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
Python中Class类用法实例分析
2015/11/12 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
校园广播稿500字
2014/02/04 职场文书
商超业务员岗位职责
2014/03/12 职场文书
挂牌仪式主持词
2014/03/20 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
房产协议书范本2014
2014/09/30 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
入党培养人考察意见
2015/06/08 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
创业计划之特色精品店
2019/08/12 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python