我们知道在使用ng-app或者ng-controller指令的时候,都会创建一个新的作用域($rootScope或者是$scope),并且在使用ng-controller指令创建的作用域会继承父级作用域($rootScope或者是$scope)所有的方法和属性。

但是这里继承的属性就有一些学问了

运行如下代码:

html

<div ng-controller="SomeController">
  {{ someBareValue }}
  <button ng-click="someAction()">Parent button</button>
  <div ng-controller="ChildController">
    {{ someBareValue }}
    <button ng-click="childAction()">Child button</button>
  </div>
</div>

js

angular.module('myApp', [])
  .controller('SomeController', function($scope) {
    $scope.someBareValue = 'hello computer';
    $scope.someAction = function() {
      $scope.someBareValue = 'hello human, from parent';
    };
  })
  .controller('ChildController', function($scope) {
    $scope.childAction = function() {
      $scope.someBareValue = 'hello human, from child';
    };
  });

初始加载完,父子作用域显示同样的值

当点击Parent button的时候,可以看到父子作用域同时变化

然后点击Child button的时候,子作用域的值更新了

而后再次点击Parent button的时候,发现父作用域更新了,但是子作用域却不在变化。

这是因为,父子作用域间的继承是通过的是一个 字符串 数字或者布尔值来实现的,这就是JS的值复制

再运行如下代码:

html

<div ng-controller="SomeController">
  {{ someModel.someValue }}
  <button ng-click="someAction()">Parent button</button>
  <div ng-controller="ChildController">
    {{ someModel.someValue }}
    <button ng-click="childAction()">Child Button</button>
  </div>
</div>

js

angular.module('myApp', [])
  .controller('SomeController', function($scope) {
    $scope.someModel = {
      someValue: 'hello computer'
    }
    $scope.someAction = function() {
      $scope.someModel.someValue = 'hello human, from parent';
    };
  })
  .controller('ChildController', function($scope) {
    $scope.childAction = function() {
      $scope.someModel.someValue = 'hello human, from child';
    };
  });

可以看到这个例子和上面例子的区别主要在于,子作用域继承自父作用域是通过一个对象someModel实现的,运行该例子。

初始完成之后,父子作用域显示相同字符串。

然后无论点击Parent Button 还是Child Button,父子作用域都同步显示相同的字符串。

这是因为,父子作用域间的继承是通过的是一个 对象 来实现的,这就是JS的引用复制

此外,除了ng-controller之外

ng-include

ng-switch

ng-repeat

ng-view

ng-if

都是有同样的特性。

Angular JS 中 ng-controller 值复制和引用复制的更多相关文章

  1. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  2. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

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

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

  4. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  5. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  6. js中以键值对的形式当枚举

    js中以键值对的形式当枚举var Penum= { B: "姓名", C: "所属居委", D: "证件号", E: "性别&qu ...

  7. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  8. Angular JS 中的服务注册方法

    在Angular JS中创建服务的几种方法 factory() service() constant() value() provider() factory(name,fn(){}) 该服务为单例的 ...

  9. 图文结合深入理解 JS 中的 this 值

    图文结合深入理解 JS 中的 this 值 在 JS 中最常见的莫过于函数了,在函数(方法)中 this 的出现频率特别高,那么 this 到底是什么呢,今天就和大家一起学习总结一下 JS 中的 th ...

  10. angularjs某些指令在外部作用域继承并创建新的子作用域引申出的“值复制”与“引用复制”的问题

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

随机推荐

  1. kubernetes实战篇之为默认账户创建镜像拉取密钥

    系列目录 上一节我们分别使用纯文本账户密码和docker的config文件一创建一个kubernetes secret对象,并且把它添加到containers的imagePullSecrets字段用以 ...

  2. 使用 Spring Boot Actuator 构建 RESTful Web 应用

    Spring Boot Actuator 是 Spring Boot 的一个子项目.通过它,可以很轻易地为应用提供多种生产级服务.本教程中,你将通过构建一个应用来学习如何添加这些服务. 1. 你需要构 ...

  3. 逻辑、集合运算上的卷积一览(FMT、FWT,……)

    \oplus=\and,\or,\veebar 简介 对于逻辑\(\oplus\)的卷积,而且你不能N方豹草 \[ A_k=\sum_{i\oplus j=k} B_i\times C_k\\ \] ...

  4. 并发编程-concurrent指南-阻塞队列-链表阻塞队列LinkedBlockingQueue

    LinkedBlockingQueue是一个基于链表的阻塞队列. 由于LinkedBlockingQueue实现是线程安全的,实现了先进先出等特性,是作为生产者消费者的首选. LinkedBlocki ...

  5. java unicode补充字符带来的码点和代码单元问题

    码点与代码单元 java string有两种判定字符的方式,一种是以码点,一种以代码单元,简单讲,码点就是真正的字符,代码单元是按大小即char型长度2个字节划分字符串. 所以length和chara ...

  6. crontab 中curl命令无法正常执行

    这里所指curl无法执行Url情况是针对带参数的链接,方法体中无法获取参数的值. 比如: */7 * * * * curl http://localhost:8088/backening/sysOrd ...

  7. 基于webpack4+vue-cli3项目的换肤功能

    起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤. 项目开 ...

  8. 树链剖分 [JLOI2014]松鼠的新家

    [JLOI2014]松鼠的新家 时间限制: 1 Sec  内存限制: 128 MB 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达, ...

  9. GitHub使用整理——关于上传Keil工程一些注意的点

    git上传警告warning: LF will be replaced by CRLF 在上传keil工程时,会遇到warning: LF will be replaced by CRLF警告: wa ...

  10. TCP传输协议中如何解决丢包问题

    TCP在不可靠的网络上实现可靠的传输,必然会有丢包.TCP是一个“流”协议,一个详细的包将会被TCP拆分为好几个包上传,也是将会把小的封裝成大的上传,这就是说TCP粘包和拆包难题. 但是许多人有不同的 ...