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的方法(二)。敬请关注!
相关推荐
-
基于豆瓣API+Angular开发的web App
一.扯淡的说 name:[豆瓣搜索] 最近关注了下豆瓣的API,发现豆瓣开放平台需要加强API文档撰写啊....但是有个可喜的发现豆瓣V2接口提供了搜索接口.最近在用phantom弄些爬虫,想想,真是美丽极了!有个豆瓣的接口,我都不用去爬数据,不用数据存储,丢给github page直接完事.豆瓣,Nice!最近也在看angular,于是就萌生了使用Angular + 豆瓣API 做一个web app.于是...网上回家就折腾了. 体验地址:http://vczero.github.io/t/h
-
AngularJS中的$watch(),$digest()和$apply()区分
AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数. 在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个"Watch"."Watch"用于监听AngularJS scope中变量的改变.可以通过调用$scope.$watch()这个方法来创建"Watch". $scope.$digest()函数会循环访问
-
webapp框架AngularUI的demo改造之路
目的:把AngularUI的模板应用到现有项目上 步骤如下: 按功能表修改demo界面 学习angularUI如何加载全部页面,为了设置自定义加载模板,在demo/demo.js中找到这一段 复制代码 代码如下: //当#为/,/scroll等等,请求index.html中<base href=""> + home.html的页面 app.config(function($routeProvider) { $routeProvider.when('/',
-
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
-
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.js中实现双向绑定的方法$watch $digest $apply
Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope
-
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')); 当封装为
随机推荐
- MySQL字段自增自减的SQL语句示例介绍
- js中判断Object、Array、Function等引用类型对象是否相等
- ASP.NET 获取客户端IP方法
- PHP分页效率终结版(推荐)
- C# 执行bat批处理文件的小例子
- Mysql联合查询UNION和Order by同时使用报错问题的解决办法
- 详解Linux命令修改文件的三个时间
- nodejs中操作mysql数据库示例
- jquery入门—访问DOM对象方法
- 基于JavaScript实现的希尔排序算法分析
- [注册表]增加可执行文件的搜寻路径
- Android实现上拉加载更多ListView(PulmListView)
- 基于Android week view仿小米和iphone日历效果
- Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
- Android 采用AOP方式封装6.0权限管理的方法
- 详解js跨域请求的两种方式,支持post请求
- Python 控制终端输出文字的实例
- layui 选择列表,打勾,点击确定返回数据的例子
- Java线程间通信不同步问题原理与模拟实例
- vue.js 实现图片本地预览 裁剪 压缩 上传功能