详解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 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 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
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
js实现延时加载Flash的方法
2015/11/26 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
python如何统计代码运行的时长
2019/07/24 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
中文系师范生自荐信
2013/10/01 职场文书
社团文化节邀请函
2014/01/10 职场文书
安全标准化实施方案
2014/02/20 职场文书
《乞巧》教学反思
2014/02/27 职场文书
大气污染防治方案
2014/05/19 职场文书
球队口号
2014/06/18 职场文书
环保项目建议书
2014/08/26 职场文书
消防演习通知
2015/04/25 职场文书
军训通讯稿范文
2015/07/18 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技