AngularJs Scope

简介:

Scope是AngularJS里的一个很重要的概念,简单的说它就是用来保存AngularJS Model们的对象,是Model们温暖的小家

那这个小家是什么时候造的呢?

Java代码   收藏代码
  1. <html ng-app="mainApp">  
  2. </html>  

我们知道,ng-app是一个应用启动AngularJS的入口点,在这里也会创建一个root scope,在controller里可以通过$rootScope调到,每个应用只能有一个root scope,但它会有多个child scope,那啥时候会创建child scope呢?

Java代码   收藏代码
  1. <html ng-app="mainApp">  
  2.     <body ng-controller="MainCtrl">  
  3.         <div ng-controller="SubCtrl" ng-include src=" 'template.html' ">  
  4.         </div>  
  5.         <ul>  
  6.             <li ng-repeat="item in items">{{item.name}}</li>  
  7.         </ul>  
  8.     </body>  
  9. </html>  

在上面的例子里,ng-controller ng-include ng-repeat都创建了新的child scope(ng-repeat是对每一个重复的元素都创建了新的child scope),他们之间的父子关系是这样的:

包含关系即是他们的父子关系,子scope是可以访问父scope上绑定的所有model和function的。

AngularJS会给scope对应的dom添加叫ng-scope的class,如果我们给自己的应用加这样一个css

Java代码   收藏代码
  1. .ng-scope {border: 2px dotted red;}  

通过红色的虚线边框我们也可以看出来大概scope的范围,但注意,并不是所有的ng-scope都是新的scope,有些ng-scope类名对应的dom共享的是同一个scope。

细心的童鞋可能注意到,ng-controller="SubCtrl"ng-include放在同一个div上了,为啥ng-controller="SubCtrl"就是爸爸,ng-include就是儿子呢? 
这个没啥特别的原因,ng-controller在AngularJS底层代码里实现的比较靠前而已,与在div上标明的顺序无关,但是这时会发生一个问题:

假如在ng-include对应的template.html里有这样的代码:

Java代码   收藏代码
  1. <input type="text" ng-model="lastName" >  

我们会发现,在ng-controller="SubCtrl"这个controller里是取不到lastName的值的。

原因是这样的~ 
我们假设ng-controller="SubCtrl"对应的是Scope Ang-include对应的是Scope B

  1. ng-include创建的Scope Bng-controller创建的Scope A的子scope,所以在template.html里可以访问Scope A的model和function。
  2. template.html里用ng-model绑定的model,是存放在Scope B上的,Scope A是拿不到的,即使model同名。

解决方案:

  • 直接对Scope A的model绑定成员对象,如ng-model="user.lastName"
  • 或在template.html使用ng-model绑定model时,加上$parent(取父scope),如:ng-model="$parent.lastName",这样info就绑定在Scope A上了

比较推荐第一种方式,因为第一种抽象出了对象,比起第二种所有的model都直接绑在$scope上来,封装的更好

 

angularJS中的路由配置中的scope

Java代码   收藏代码
  1. var routeTable = function($routeProvider) {  
  2.  $routeProvider.when('/sellList', {  
  3.    templateUrl: 'views/sell/list.html',  
  4.    controller: 'sellListCtrl',  
  5.    resolve: sellResolve  
  6. )  

里面的controller的作用域scope对应tempateUrl页面上的全局,页面上任意地方写的angularjs都能起作用,注意页面里面不需要用ng-app='sellListCtrl'

 

 一共有四种 Scope:
普通进行原型继承的 Scope —— ng-include, ng-switch, ng-controller, directive with scope: true
普通原型继承的 Scope 但拷贝赋值 —— ng-repeat。 每个 ng-repeat 的循环都创建新的子 Scope,并且子 Scope 总是获得新的属性。
独立的 isolate scope —— directive with scope: {...}。它不是原型继承,但 ‘=’, ‘@’ 和 ‘&’ 提供了访问父 Scope 属性的机制。
transcluded scope —— directive with transclude: true。它也遵循原型继承,但它同时是任何 isolate scope 的兄弟。
对于所有的 Scope,Angular 总是会通过 Scope 的 $parent, $$childHead 和 $$childTail 属性记录父-子关系。

 
相关文章
|
Kubernetes API 计算机视觉
利用 member update 实现 etcd 灾难恢复 [也可实现 etcd 集群迁移]
利用 member update 实现 etcd 灾难恢复 [也可实现 etcd 集群迁移]
1448 0
|
11月前
|
安全 Java 测试技术
Java“AccessControlException”解决
Java中的“AccessControlException”通常发生在尝试访问受限资源时,如文件或网络。解决方法包括:确保所需权限已授予,检查安全策略配置,使用doPrivileged块执行敏感操作。调整策略文件或代码以匹配实际需求。
560 1
|
JavaScript
Vue3抽屉(Drawer)
这是一个基于Vue的抽屉组件(Drawer),提供了丰富的自定义选项,如宽度、高度、标题、关闭按钮等,并支持顶部、右侧、底部和左侧四种方向。
481 0
Vue3抽屉(Drawer)
|
负载均衡 网络协议 vr&ar
ensp中rip动态路由协议原理及配置命令(详解)
ensp中rip动态路由协议原理及配置命令(详解)
2038 3
|
Kubernetes Cloud Native Linux
云原生|kubernetes|rancher-2.6.4安装部署简明手册
云原生|kubernetes|rancher-2.6.4安装部署简明手册
1749 0
云原生|kubernetes|rancher-2.6.4安装部署简明手册
|
机器学习/深度学习 人工智能 分布式计算
大模型时代的人工智能+大数据平台,加速创新涌现
2023年10月31日,2023云栖大会上,阿里云副总裁、阿里云计算平台事业部负责人汪军华宣布阿里云人工智能+大数据平台升级发布,以服务大模型时代下各行各业的业务创新。
|
存储 网络性能优化 虚拟化
云计算——内存虚拟化与I/O虚拟化
云计算——内存虚拟化与I/O虚拟化
246 0
|
XML Java Shell
花式吊打源码中 Android.mk 集锦
花式吊打源码中 Android.mk 集锦
298 0
|
数据采集 JavaScript 关系型数据库
8 种主流数据迁移工具技术选型,yyds! 上
8 种主流数据迁移工具技术选型,yyds! 上
|
JavaScript 程序员 API
通过nodejs实现网易云音乐批量下载或单曲下载
从豆瓣转到网易云后,发现了不少好听的歌曲,然鹅..当我想把这些歌拿下来扔车上听的时候发现竟然不允许下载..能听不能下?这不科学,作为一名程序猿,必然要迎难而上啊.
通过nodejs实现网易云音乐批量下载或单曲下载

热门文章

最新文章