一句话: 就是孩子可以啃老,老子不能动孩子一根毛!

* 子控制器有父控制器里变量的所有权限,可以读取,也可以修改.

* 父控制器不能读,也不能修改孩子的变量

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控制器-作用域嵌套的更多相关文章

  1. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  2. 简话Angular 01 初识Angular 数据绑定

    1. Angular有哪些突出优点 1) MVC 基于Html-Javascript 2) 依赖注入 3) 数据双向绑定,响应式页面设计 4) 模块化,自定义指令 2. 简话数据绑定 1) 代码: & ...

  3. 简话Angular 00 为什么要学Angular

    一句话: 现在不学Angular的结局,就和5年前不学JQuery一样! 谁学谁知道,早学早进阶! 1. JQuery vs Javascipt 问两个问题: 1) 你用过JQuery吗?当然! 2) ...

  4. 简话ASP.NET Web API

    简话ASP.NET Web API 在vs2012中,我们很容易在根据选择的ASP.NET MVC Web应用程序来新建一个Web API应用,聪明的你一定想见得到,Web API和MVC有着某种联系 ...

  5. ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频

    视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...

  6. angular 2 angular quick start Could not find HammerJS

    Angular2 的material中 引用了 hammerjs,遇到Could not find HammerJS错误,正确的步骤如下: 需要在如下位置增加 对material 和 hammerjs ...

  7. C++学习笔记----4.4 继承情况下的类作用域嵌套

    引言: 在继承情况下,派生类的作用域嵌套在基类作用域中:如果不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义. 正是这种类作用域的层次嵌套使我们能够直接访问基类的成员,就好像这些成员 ...

  8. 简话Angular 08 Angular ajax

    一句话: 它们Angular框架声明周期的各个阶段,常规约定各专注于特定功能,经过处理也可以互相替换 1.功能细分简解 $http 类似JQuery ajax,支持promise $http.json ...

  9. 简话Angular 07 Angular config-run-service-factory-provider-constant-value

    一句话: 它们Angular框架声明周期的各个阶段,常规约定各专注于特定功能,经过处理也可以互相替换 1.功能细分简解 config Angular module模块的加载阶段-应用在此时还没有启动 ...

随机推荐

  1. 05: MySQL高级查询

    MySQL其他篇 目录: 参考网站 1.1 GROUP BY分组使用 1.2 mysql中NOW(),CURDATE(),CURTIME()的使用 1.3 DATEDIFF() 函数 1.4 DATE ...

  2. UESTC 594 我要长高 - 单调性优化

    韩父有N个儿子,分别是韩一,韩二…韩N.由于韩家演技功底深厚,加上他们间的密切配合,演出获得了巨大成功,票房甚至高达2000万.舟子是名很有威望的公知,可是他表面上两袖清风实则内心阴暗,看到韩家红红火 ...

  3. 求LCA练习+部分算法复习 2017.1.22

    第一题就LCA即可.不过推荐用Tarjan(最快,常数很小).然后Tarjan的时候顺便就出一个dist[i],表示i节点到根节点的距离.求出了LCA,那么两点间的距离就为dist[u] + dist ...

  4. [c/c++]指针（1）

    指针算是一种特殊的变量,它存储的是一个内存地址,你既可以通过它来给制定内存地址赋值 (可能会被操作系统收回或者与其它程序冲突),又可以提高运行速度 First Step: 声明一个指针变量 int* ...

  5. Windows Services 学习(转载)

    转载:http://blog.csdn.net/fakine/article/details/42107571 一.学习点滴 1.本机服务查看:services.msc /s2.服务手动安装(使用sc ...

  6. JAVA I/O（六）多路复用IO

    在前边介绍Socket和ServerSocket连接交互的过程中,读写都是阻塞的.套接字写数据时,数据先写入操作系统的缓存中,形成TCP或UDP的负载,作为套接字传输到目标端,当缓存大小不足时,线程会 ...

  7. 在EditText里输入小写字母时，将小写字母转化为大写显示

    1.新建类继承ReplacementTransformationMethod 方法 public class test extends ReplacementTransformationMethod ...

  8. jQuery 中 $( ) 函数的用法总结

    摘要 jQuery对象: 具有jquery框架设置的所有功能的调用者, 就是该框架的对象 $又是什么?: $就是jQuery对象, jQuery对象为window的全局属性, 所以可以直接使用 如何自 ...

  9. weka中算法说明[转]

    1) 数据输入和输出WOW():查看Weka函数的参数.Weka_control():设置Weka函数的参数.read.arff():读Weka Attribute-Relation File For ...

  10. ubuntu下安装mkfs.jffs工具

    一.环境 Os: ubuntu 16.04 二.安装 2.1安装依赖库 sudo apt install zlib1g-dev liblzo2-dev uuid-dev 2.2编译安装mtd-util ...