Angular在一个页面中使用两个ng-app的方法(二)

在上篇文章给大家介绍了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的方法(二)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • AngularJS ng-app 指令实例详解

    AngularJS ng-app 指令 AngularJS 实例 让 body 元素称为 AngularJS 应用的根元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

  • Angular.js初始化之ng-app的自动绑定与手动绑定详解

    前言 众所周知在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API--angular.bootstrap() . 本文将给大家详细介绍关于Angular.js初始化之ng-app自动与手动绑定的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍. 一.传统的绑定初始化 <html> <head> <meta http-equiv="Co

  • AngularJS使用ng-app自动加载bootstrap框架问题分析

    本文实例分析了AngularJS使用ng-app自动加载bootstrap框架问题.分享给大家供大家参考,具体如下: 前面的文章<AngularJS框架的ng-app指令与自动加载实现方法分析> 提出了使用ng-app指令的情况.之前觉得出现第4和第5种情况很奇怪,因为只看到了现象,没有看到本质.JS错误,最直观的表现方式就是:弹出一个非常不友好的JS错误窗口.当脚本出现了未捕获的错误,浏览器才会弹出错误提示.还有一种比较隐晦的表示:在浏览器的控制台输出错误信息.这提示我们:使用JS框架的时候

  • AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

    本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法.分享给大家供大家参考,具体如下: 接着前面那篇<AngularJS使用ng-app自动加载bootstrap框架问题分析>,现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块. <!DOCTYPE html> <html> <head> <script src="angular.js">&l

  • Angular.js回顾ng-app和ng-model使用技巧

    Angular.js中index.html简单结构: <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model=&

  • Angular在一个页面中使用两个ng-app的方法(二)

    在上篇文章给大家介绍了Angular在一个页面中使用两个ng-app的方法,这种方法不太推荐,下面给大家介绍方法二,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title>

  • Angular在一个页面中使用两个ng-app的方法

    下面一段代码给大家介绍了Angular在一个页面中使用两个ng-app的方法,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title> </head> <b

  • 浅谈vue同一页面中拥有两个表单时,的验证问题

    问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息 我们可以通过为两个表单添加ref属性 之后在通过调用resetFields()方法来解决问题 代码如下 <el-form :model="form" :rules="rules" ref="form" label-width="100px"> this.$refs["form"]

  • 浅谈在页面中获取到ModelAndView绑定的值方法

    springMVC中通过ModelAndView进行后台与页面的数据交互,那么如何在页面中获取ModelAndView绑定的值呢? 1.在JSP中通过EL表达式进行获取(比较常用) 后台: ModelAndView model = new ModelAndView(); model.addObject("name","Jims"); JSP:在JSP中直接使用${name }进行获取 姓名:${name } 2.通过JSP内置对象进行获取 后台: ModelAndV

  • Python中交换两个元素的实现方法

    Python既具有普通程序开发语言的特点,也具有Matlab语言用于数值计算的特点,,当然了数值计算是由其其强大的第三方库numpy实现的,矩阵在python中数据类型是ndarray,python中交换两个数值的代码和交换同一矩阵(ndarray)中不同向量的写法是不一样的. 以下是用Python原生的数据结构list实现的交换 >> a = [1,2,3] >> b = [4,5,6] >> a [1,2,3] >> b [4,5,6] >>

  • iframe的onload在Chrome/Opera中执行两次Bug的解决方法

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>iframe的onload在Chrome/Opera中执行两次</title> </head> <body> <script> var ifr = document.createElement('iframe'); ifr.onload =

  • jsp页面中插入css样式的三种方法总结

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表.<link>标签在(文档的)头部: <head><link rel="stylesheet"  type="text/css"  href="path/myCss.css"/></head> 2.内部样式 当

  • Powershell在一个会话中只允许执行指定命令的方法

    支持所有PS版本 Powershell处理可执行程序(如EXE)类似其它语言.然而你也可以让PS阻止执行任何程序或仅允许执行授权文件. 默认是允许执行任何程序: 复制代码 代码如下: PS> $ExecutionContext.SessionState.Applications * 下面将授权PS只允许执行ping.exe和regedit.exe命令. 复制代码 代码如下: $ExecutionContext.SessionState.Applications.Clear() $Executio

  • sql在一个表中添加字段并添加备注的方法

    1.加字段: alter table 表名 ADD 字段名 类型; eg: alter table sys_cwzd ADD SCCLLJ VARCHAR2(50); 2.加备注: comment on column 表名.字段名 is '备注名'; eg: comment on column sys_cwzd.SCCLLJ is '上传材料路径'; 内容扩展: 添加新字段: alter table bulletin add citycode varchar(6) not null defaul

  • 解决JSP开发中Web程序显示中文三种方法

    方法一:最简单也是用的最多的方法 <%@ page language="java" pageEncoding="GBK" %> 或者<%@ page contenttype="text/html;charset=gbk";>这里可以用gb2312或者gbk,只是gbk比gb2312支持跟多的字符. 这个方法用于jsp页面中的中文显示. 方法二:使用过滤器 过滤器使用主要针对表单提交,插入数据库的数据都是?号.这也是应为to

随机推荐