详解angular中的作用域及继承


Posted in Javascript onMay 31, 2017

在一些使用angular框架的大型项目中,似乎有很多个controller,而每个controller都有自己的$scope.

1、$rootscope

$rootScope顶级作用域,也叫根作用域,类似于window,window的属性在任何子作用域都可以访问。$rootScope则是所有controller进行数据沟通的中间域,即在$rootScope中的数据,在每个controller中都能通过$rootScope.xxx获取到。

2、$scope

(1)作用

$scope 就在视图和控制器之间建立了一个桥梁,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图.每个控制器controller对应一个$scope,通过为其属性赋值,可以传递数据给模板渲染.

(2)生命周期

创建:在创建控制器或指令时,AngularJS会用$injector创建一个新的作用域,并在这个新建的控制器或指令运行时将作用域传递进去。

链接:当Angular开始运行时,所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。这些函数被称为$watch函数,Angular通过这些函数获知何时启动事件循环。

更新:当事件循环运行时,它通常执行在顶层$scope对象上(被称作$rootScope),每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化,$scope对象就会触发指定的回调函数。
销毁:当一个$scope在视图中不再需要时,这个作用域将会清理和销毁自己。尽管永远不会需要清理作用域(因为Angular会为你处理),但是知道是谁创建了这个作用域还是有用的,因为你可以使用这个$scope上叫做$destory()的方法来清理这个作用域。

3、原型继承

scope是AngularJS中的作用域(其实就是存储数据的地方),很类似JavaScript的原型链 。搜索的时候,优先找自己的scope,如果没有找到就沿着作用域链向上搜索,直至到达根作用域rootScope。

<!DOCTYPE html>
          <html>
          <head>
           <title></title>
          </head>
          <body ng-app="myApp">
          <div ng-controller="parentController">
            {{name}}
            <div ng-controller="sonController">
              {{name}}
            </div>
          </body>
          <script type="text/javascript" src="./angular.min.js"></script>
          <script>
            var parentController=function($scope){
              $scope.name="parent";
            }
            var sonController=function($scope){
              console.log($scope.name);//parent
            }
            parentController.$injector=["$scope"];
            sonController.$injector=["$scope"];
            angular.module("myApp",[])
            .controller("parentController",parentController)
            .controller("sonController",sonController)
          </script>
          </html>

首先子控制器在自己的作用域内查找name属性,没找到,向父控制器找。

补充一点,如何在子控制器中修改父控制器中$scope的值,可见如下:

$scope.$parent.name="son";在子控制器中$scope.$parent就表示父控制器中的$scope,然后修改其值即可。

4、$new

$scope.$new(isolated,parent);用于定义scope的child scope

1)参数:isolated,是否是隔离的。如果值是true,那么这个scope不会从父scope继承原型。作用域是独立的,在这里不能看见父scope的属性。如果值为false,则继承自父(可以访问父scope的所有成员),默认为false!

parent  用于指定创建的子scope的父scope,如果没有此参数,则父scope为调用当前$new方法的$scope

var myController=function($scope){
    $scope.data="hello!"
    var scope1=$scope.$new(false,$scope);
    console.log(scope1.data); //hello! scope1继承了$scope,所以可以访问到data
    var scope2=$scope.$new(true,$scope); 
    console.log(scope2.data);// undefined 第一个参数为true,表示是隔离的,无法继承,自己又没有,故为undefined
  }
  myController.$injector=["$scope"];
  angular.module("myApp",[])
  .controller("myController",myController)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 Javascript
Node学习记录之cluster模块
May 31 #Javascript
Express框架之connect-flash详解
May 31 #Javascript
node.js中express-session配置项详解
May 31 #Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 #Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 #Javascript
JS简单实现自定义右键菜单实例
May 31 #Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 #Javascript
You might like
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
pandas数据集的端到端处理
2019/02/18 Python
Python中psutil的介绍与用法
2019/05/02 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python用户自定义异常的实现
2020/12/25 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
专升本自我鉴定
2013/10/10 职场文书
文案策划求职信
2014/04/14 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS