详解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 相关文章推荐
node.js中的socket.io的广播消息
Dec 15 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
微信小程序自定义组件
Aug 16 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 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
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
javascript函数库-集合框架
2007/04/27 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
Angular排序实例详解
2017/06/28 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
python3爬取各类天气信息
2018/02/24 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
pytorch构建多模型实例
2020/01/15 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
什么是索引指示器
2012/08/20 面试题
学生实习推荐信范文
2013/11/26 职场文书
学生期末评语大全
2014/04/30 职场文书
团队激励口号
2014/06/06 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang