【AnjularJS系列4 】 — 单个页面加载多个ng-App
第四篇,插播, 单个页面加载多个ng-App
在写范例的时候发现的问题
一个页面有多个ng-app,angular只会处理第一个ng-app
需要加载两个ng-app,需要进行手动加载:
angular.bootstrap(document.getElementById("myBind"), ["myBind"]);
angular.bootstrap(document.getElementById("mysimpleBind"), ["mysimpleBind"]);
注:必须给ng-app的元素进行Id赋值,才能进行手动加载。
以下为完整代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/angular.min.js"></script>
<style type="text/css"> </style>
</head>
<body>
<div id="mysimpleBind" ng-app="mysimpleBind" ng-controller="MySimplectrl">
<div>
<label>Name:</label>
<input type="text" ng-model="name" placeholder="请输入姓名" name="">
</div>
<div>
<label>问候语:</label>
<label>Hello,{{name}}</label>
</div>
</div>
2、双向绑定
<div id="myBind" ng-app="myBind" ng-controller="MyBindctrl">
<div>
<label>昵称:</label>
<input type="text" ng-model="user.name" placeholder="请输入姓名">
<input type="button" value="获取年龄" ng-click="GetAge();">
</div>
<div>
<label>年龄:</label>
<label> {{user.agetext}}</label>
</div>
</div>
</body>
<script type="text/javascript">
var myModule = angular.module('myBind', []);
myModule.controller("MyBindctrl",function($http,$scope){
var nameInfo= [{name:"张立伟",age:20},{name:"闵志涛",age:21},{name:"杨一凡",age:22},{name:"黄征",age:29}];
$scope.GetAge=function(){
var _bl=false;
for(var i=0;i<nameInfo.length;i++)
{
if (nameInfo[i].name==$scope.user.name) { $scope.user.agetext= $scope.user.name+"今年"+nameInfo[i].age+"岁了";
_bl=true;
break;
}
}
if (!_bl) {
$scope.user.agetext= "找不到记录";
}
};
});
var myModule1 = angular.module('mysimpleBind', []);
myModule1.controller("MySimplectrl",function($http,$scope){
}); angular.bootstrap(document.getElementById("myBind"), ["myBind"]);
angular.bootstrap(document.getElementById("mysimpleBind"), ["mysimpleBind"]); </script>
</html>
【AnjularJS系列4 】 — 单个页面加载多个ng-App的更多相关文章
- AnjularJS系列4 —— 单个页面加载多个ng-App
第四篇,插播, 单个页面加载多个ng-App 在写范例的时候发现的问题 一个页面有多个ng-app,angular只会处理第一个ng-app 需要加载两个ng-app,需要进行手动加载: angula ...
- http系列--从输入 URL 到页面加载完成的过程
一.前言 这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目.每一个前端人员,如果要往更高阶发展,必然会将自己的知识体系梳理一遍,没有牢固的知识体系,无法往更高处走! 二.主干流程 在将浏览器 ...
- 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
- JS脚本文件的位置对页面加载性能影响以及无阻塞脚本(javascript)模式
JS的阻塞特性:当<script>出现的时候,页面必须等待脚本文件的加载.解析.执行完毕后才能继续进行页面的渲染.不管脚本文件是以内联形式还是外部引入的形式出现在<script> ...
- 转: web 页面加载速度优化实战-100% 的飞跃提升
前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...
- 从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- web页面加载速度缓慢,如何优化?
参考博客: https://www.cnblogs.com/xp796/p/5236945.html https://www.cnblogs.com/MarcoHan/p/5295398.html - ...
- jQuery页面加载初始化的3种方法
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
- 页面加载完成后,触发事件——trigger()
<button id="btn">点击我</button> <div id="test"></div> 如果页面 ...
随机推荐
- spring注解略解
@Scope("prototype") 如果ACTION中不@Scope("prototype"),有可能报找不到XXXACTION的错误!写上这个就表示每次请 ...
- 企业级任务调度框架Quartz(7) 线程在Quartz里的意义(1)
1.Java 中的线程 线程允许程序同一时间做很多任务,至少,看起来那些任务是并发执行的.在我的并发编程的帖子里有介绍线程的基本概念:我们知道在任一特定时刻仅有一个线程 在执行,但是 CPU ...
- Python笔记18-----函数收集参数
1.收集参数(参数前面加*): def test1(param1,*params): print(param1) print(params) 调用:test1(1,2,3,4) 结果:1 (2,3,4 ...
- N1-1 - 树 - Minimum Depth of Binary Tree
题目描述: Given a binary tree, find its minimum depth.The minimum depth is the number of nodes along the ...
- BZOJ 1901 Dynamic Rankings (整体二分+树状数组)
题目大意:略 洛谷传送门 这道题在洛谷上数据比较强 貌似这个题比较常见的写法是树状数组套主席树,动态修改 我写的是整体二分 一开始的序列全都视为插入 对于修改操作,把它拆分成插入和删除两个操作 像$C ...
- locate-updatedb命令检索不全
locate-updatedb命令检索不全 执行updatedb命令,用于立刻更新locate命令所必需的数据库文件,但有些文件可能会在检索过程中被过滤掉. 有时候明明存在的文件,用find命令都能搜 ...
- JAVA的基本数据类型和引用数据类型的区别
引用数据类型: 类.接口类型.数组类型.枚举类型.注解类型: 基本数据类型和引用数据类型的区别: 基本数据类型在被创建时,在栈上给其划分一块内存,将数值直接存储在栈上: 引用数据类型在被创 ...
- HDU 3579 线性同余方程组
#include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...
- 动态为TextView控件设置drawableLeft图标,并设置间距
效果图: 重要属性: textView.setCompoundDrawablePadding(4);//设置图片和text之间的间距 textView.setPadding(-5, 0, 0, 0); ...
- itunes connect上传截图提示无法加载文件问题
解决的方法: 图片名字中不能包括汉字,要英文字母或数字.