详解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 相关文章推荐
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
js函数调用的方式
May 06 Javascript
javascript快速排序算法详解
Sep 17 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
在Python中字典根据多项规则排序的方法
2019/01/21 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
24岁生日感言
2014/01/13 职场文书
关于逃课的检讨书
2014/01/23 职场文书
办公室岗位职责
2014/02/12 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
民间借贷协议书范本
2014/10/01 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
新员工辞职信范文
2015/05/12 职场文书
2015暑假社会调查报告
2015/07/13 职场文书