详解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 相关文章推荐
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP 处理图片的类实现代码
2009/10/23 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Django缓存Cache使用详解
2020/11/30 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
火山动力Java笔试题
2014/06/26 面试题
社区巾帼文明岗事迹材料
2014/06/03 职场文书
医者仁心观后感
2015/06/17 职场文书
个人收入证明格式
2015/06/24 职场文书
创业计划书之面包店
2019/09/12 职场文书
亲情作文之母爱
2019/09/25 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL