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>
  <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的方法(二)。敬请关注！

赞 (0)

相关推荐

  • 基于豆瓣API+Angular开发的web App

    基于豆瓣API+Angular开发的web App

    一.扯淡的说 name:[豆瓣搜索] 最近关注了下豆瓣的API,发现豆瓣开放平台需要加强API文档撰写啊....但是有个可喜的发现豆瓣V2接口提供了搜索接口.最近在用phantom弄些爬虫,想想,真是美丽极了!有个豆瓣的接口,我都不用去爬数据,不用数据存储,丢给github page直接完事.豆瓣,Nice!最近也在看angular,于是就萌生了使用Angular + 豆瓣API 做一个web app.于是...网上回家就折腾了. 体验地址:http://vczero.github.io/t/h

  • 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=&

  • webapp框架AngularUI的demo改造之路

    webapp框架AngularUI的demo改造之路

    目的:把AngularUI的模板应用到现有项目上 步骤如下: 按功能表修改demo界面 学习angularUI如何加载全部页面,为了设置自定义加载模板,在demo/demo.js中找到这一段 复制代码 代码如下: //当#为/,/scroll等等,请求index.html中<base href=""> + home.html的页面 app.config(function($routeProvider) {   $routeProvider.when('/',        

  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply

    Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope

  • angularJS中$apply()方法详解

    对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 复制代码 代码如下: "scope is an object that refers to the application model. It is an execution c

  • AngularJS中的$watch()，$digest()和$apply()区分

    AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数. 在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个"Watch"."Watch"用于监听AngularJS scope中变量的改变.可以通过调用$scope.$watch()这个方法来创建"Watch". $scope.$digest()函数会循环访问

  • 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

  • 解决vue一个页面中复用同一个echarts组件的问题

    因为页面中要用echarts图表的地方比较多,所以封装了组件,方便复用,如图: 我需要这样一个饼图,并且接下来在很多次地方要用到. 直接复制官网的代码,再改改数据,需要用的时候直接拿来用. 但是接下来出现了一个问题:如果我在同一个页面多次使用这个组件,图表将不能正常显示.分析了一下, echarts通过id获取对象 // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); 当封装为

随机推荐