简话Angular 02 Angular控制器-作用域嵌套
一句话: 就是孩子可以啃老,老子不能动孩子一根毛!
* 子控制器有父控制器里变量的所有权限,可以读取,也可以修改.
* 父控制器不能读,也不能修改孩子的变量
1. html代码
<div ng-controller="ParentController">
<h3><strong>父控制器</strong></h3>
<label>姓名: </label> <input type="text" ng-model='person.name'>
<label>年龄: </label> {{person.age}}
<label>职业: </label> {{person.career}}
<label>出生地: </label> {{child.birth}}
<br><label>工作: </label> <input type="text" ng-model="job"> <div ng-controller="ChildController">
<h3><strong>子控制器</strong></h3>
<label>年龄: </label> <input type="text" ng-model='person.age'>
<label>姓名: </label> {{person.name}}
<label>职业: </label> <input type="text" ng-model='person.career'>
<label>出生地: </label> <input type="text" ng-model='child.birth'>
<button ng-click="updateBirth()">更新出生地</button>
<br><label>工作: </label> <input type="text" ng-model="job">
</div>
</div>
2. Javascript代码
<script>
var myApp = angular.module('myApp', []);
myApp.controller('ParentController', function($scope) {
$scope.person = {name: '李三', age: 15}; }); myApp.controller('ChildController', function($scope) {
$scope.child = {}; $scope.updateBirth = function() {
$scope.child.birth = "苏州";
}
});
</script>
3. 源码和查看效果
1) 查看效果: http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/2-controller-scope.html
2)源代码: https://github.com/jimuyouyou/angular-bootstrap-rest-seed
3. 解释
一句话: 就是孩子可以啃老,老子不能动孩子一根毛!
* 子控制器有父控制器里变量的所有权限,可以读取,也可以修改.
* 父控制器不能读,也不能修改孩子的变量
1. 父控制器-打开页面就显示姓名, 说明$scope变量值更新了,页面会自动响应
2. 子控制器-打开页面就显示姓名, 说明嵌套控制器也嵌套上下文,子scope可以使用所有父scope的变量(因为儿子里没有person的定义)
3. 修改子控制器的年龄,父控制器年龄也更新, 说明子scope可以改变父scope里边变量的值
4. 修改子控制器的出生地,父控制器没有更新的,说明子scope的变量,父scope无权读取和修改(因为child.birth只在子scope里边)
5. 点击更新出生地,出生地值变化,说明$scope也可以更新html元素值,就是双向绑定
6. 父控制器里输入工作,子控制器跟着显示,说明父子同名变量时,孩子如果为空,可以从父亲那里取-啃老
7. 子控制器时输入工作,父控制器不更新的,说明父子同名变量时,孩子如果有值了,老子拿不到-啃老不敬老
4. 全部源码
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>2-controller-scope.html</title>
<link rel='stylesheet' href='../../libs/bootstrap3.1.1/css/bootstrap.min.css' />
<script src='../../libs/angular1.3.13/angular.js'></script>
</head>
<body class="container"> <div ng-controller="ParentController">
<h3><strong>父控制器</strong></h3>
<label>姓名: </label> <input type="text" ng-model='person.name'>
<label>年龄: </label> {{person.age}}
<label>职业: </label> {{person.career}}
<label>出生地: </label> {{child.birth}}
<br><label>工作: </label> <input type="text" ng-model="job"> <div ng-controller="ChildController">
<h3><strong>子控制器</strong></h3>
<label>年龄: </label> <input type="text" ng-model='person.age'>
<label>姓名: </label> {{person.name}}
<label>职业: </label> <input type="text" ng-model='person.career'>
<label>出生地: </label> <input type="text" ng-model='child.birth'>
<button ng-click="updateBirth()">更新出生地</button>
<br><label>工作: </label> <input type="text" ng-model="job">
</div>
</div> <br><br>
<div class="bg-info">
<label>
* 子控制器有父控制器里变量的所有权限,可以读取,也可以修改. <p></p>
* 父控制器不能读,也不能修改孩子的变量<p></p>
* <span class="bg-danger">就是孩子可以啃老,老子不能动孩子一根毛!</span>
</label>
<p></p>
1. 父控制器-打开页面就显示姓名, 说明$scope变量值更新了,页面会自动响应 <p></p>
2. 子控制器-打开页面就显示姓名, 说明嵌套控制器也嵌套上下文,子scope可以使用所有父scope的变量(因为儿子里没有person的定义) <p></p>
3. 修改子控制器的年龄,父控制器年龄也更新, 说明子scope可以改变父scope里边变量的值<p></p>
4. 修改子控制器的出生地,父控制器没有更新的,说明子scope的变量,父scope无权读取和修改(因为child.birth只在子scope里边) <p></p>
5. 点击更新出生地,出生地值变化,说明$scope也可以更新html元素值,就是双向绑定<p></p>
6. 父控制器里输入工作,子控制器跟着显示,说明父子同名变量时,孩子如果为空,可以从父亲那里取-啃老<p></p>
7. 子控制器时输入工作,父控制器不更新的,说明父子同名变量时,孩子如果有值了,老子拿不到-啃老不敬老<p></p>
</div> <script>
var myApp = angular.module('myApp', []);
myApp.controller('ParentController', function($scope) {
$scope.person = {name: '李三', age: 15}; }); myApp.controller('ChildController', function($scope) {
$scope.child = {}; $scope.updateBirth = function() {
$scope.child.birth = "苏州";
}
});
</script> </body>
</html>
简话Angular 02 Angular控制器-作用域嵌套的更多相关文章
- angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...
- 简话Angular 01 初识Angular 数据绑定
1. Angular有哪些突出优点 1) MVC 基于Html-Javascript 2) 依赖注入 3) 数据双向绑定,响应式页面设计 4) 模块化,自定义指令 2. 简话数据绑定 1) 代码: & ...
- 简话Angular 00 为什么要学Angular
一句话: 现在不学Angular的结局,就和5年前不学JQuery一样! 谁学谁知道,早学早进阶! 1. JQuery vs Javascipt 问两个问题: 1) 你用过JQuery吗?当然! 2) ...
- 简话ASP.NET Web API
简话ASP.NET Web API 在vs2012中,我们很容易在根据选择的ASP.NET MVC Web应用程序来新建一个Web API应用,聪明的你一定想见得到,Web API和MVC有着某种联系 ...
- ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频
视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...
- angular 2 angular quick start Could not find HammerJS
Angular2 的material中 引用了 hammerjs,遇到Could not find HammerJS错误,正确的步骤如下: 需要在如下位置增加 对material 和 hammerjs ...
- C++学习笔记----4.4 继承情况下的类作用域嵌套
引言: 在继承情况下,派生类的作用域嵌套在基类作用域中:如果不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义. 正是这种类作用域的层次嵌套使我们能够直接访问基类的成员,就好像这些成员 ...
- 简话Angular 08 Angular ajax
一句话: 它们Angular框架声明周期的各个阶段,常规约定各专注于特定功能,经过处理也可以互相替换 1.功能细分简解 $http 类似JQuery ajax,支持promise $http.json ...
- 简话Angular 07 Angular config-run-service-factory-provider-constant-value
一句话: 它们Angular框架声明周期的各个阶段,常规约定各专注于特定功能,经过处理也可以互相替换 1.功能细分简解 config Angular module模块的加载阶段-应用在此时还没有启动 ...
随机推荐
- 一些应该使用mongodb或者其他文档存储而不是redis或mysql、oracle json的情形(最近更新场景)
通常来说,我们应该使用应用的特性而不是自己的爱好或者规定而去选择一种合适的组件,选择的标准应该是这个组件最适合或者本身其设计就是为了解决这个问题,而不是这个组件能够做这事情为标准.就拿存储来说,任何时 ...
- ubuntu服务器安装FTP服务
目录 ubuntu服务器安装FTP服务 一.实验环境 二.安装配置FTP 下载ftp 配置环境 新建用户 ubuntu服务器安装FTP服务 参考教程 [ubuntu16.04搭建ftp服务器 一.实验 ...
- 20165310java_teamExp1_week1
结对编程项目-四则运算-week1 需求分析 第一周达成 支持真分数的四则运算 支持多运算符 能手动输入n道题目,n由使用者输入 后续拓展的可能 能随机生成n道题目,n由使用者输入 能够判断正误,错误 ...
- 20145319 《网络渗透》web安全基础实践
20145319 <网络渗透>web安全基础实践 问题回答 Sql注入攻击原理,如何防御 攻击原理:由于对于用户输入并没做出相应限制,因此可以通过构造特定的sql语句,达到自身的一些非法目 ...
- AtCoder Tenka1 Programmer Beginner Contest 解题报告
赛时写了ABC,D实在没啥思路,然后C又难调...然后就从写完AB时的32名掉到了150+名 T_T 码力不够,思维不行,我还是AFO吧 比赛链接 A - Measure sb模拟,奇数串倒着输出偶数 ...
- kafka删除一个topic
前言 当我们在shell中执行topic删除命令的时候` kafka-topics --delete --topic xxxx --zookeeper xxx`,会显示,xxxx已经被标记为删除.然后 ...
- rg.apache.ibatis.binding.BindingException: Mapper method 'com.dao.Cameao.getOnlineDayRation attempted to return null from a method with a primitive return type (float)
本文为博主原创,未经允许不得转载: 异常展示如下: org.apache.ibatis.binding.BindingException: Mapper method 'com.dao.Cameao. ...
- 以QQ举例 说明计算机网络中的一些概念区别(TCP与UDP，广播与单播)
QQ 中的 广播与单播 今天简单地学习了一下 广播和多播(组播) 的知识.关于 单播和多播 的概念,可以用 QQ 中的一些例子来解释. 单播,就像 两个人聊QQ 一样,信息的接收和传递只在两个节点之间 ...
- 非[无]root权限 服务器 下安装perl以及perl模块
转载自http://www.zilhua.com 在本博客中,所有的软件安装都在服务器上,且无root权限.理论上适合所有的用户. 我的安装目录 cd /home/zilhua/software 1. ...
- linux之cut用法--转载
cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对“行”来进行分析的,并不是整篇信息分析的. (1)其语法格式为:cut [-bn] [file] 或 cut ...