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 ng-app="myApp">
  <input type="button" ng-controller="App1Controller" ng-click="do1()" value="按钮1" />
  <input type="button" ng-controller="App2Controller" ng-click="do2()" value="按钮2">
  <script src="bower_components/angular/angular.js"></script>
  <script>
  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);
   };
  }]);
  /**
  * myApp Mod'myApp1','myApp2'ul;
  *
  * Description
  */
  angular.module('myApp', ['myApp1','myApp2']);
  </script>
 </body>
</html>

就是用一个大的模块将两个小模块包起来。

以上所述是小编给大家介绍的Angular在一个页面中使用两个ng-app的方法(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 #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
You might like
Windows下的PHP安装pear教程
2014/10/24 PHP
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
vuex state及mapState的基础用法详解
2018/04/19 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
在Python中使用模块的教程
2015/04/27 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
python学习教程之使用py2exe打包
2017/09/24 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
119消防日活动总结
2014/08/29 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
干部作风建设工作总结
2014/10/29 职场文书
2015年教研组工作总结
2015/05/04 职场文书
党纪处分决定书
2015/06/24 职场文书
家长会后的感想
2015/08/11 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书