详解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 相关文章推荐
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
详解js的六大数据类型
Dec 27 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
js实现表格数据搜索
Aug 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 Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php中switch语句用法详解
2015/08/17 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
Javascript堆排序算法详解
2014/12/03 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
深入理解React高阶组件
2017/09/28 Javascript
简单的三步vuex入门
2018/05/20 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
小程序实现分类页
2019/07/12 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
Python正确重载运算符的方法示例详解
2017/08/27 Python
python区分不同数据类型的方法
2019/10/14 Python
python装饰器代替set get方法实例
2019/12/19 Python
python用什么编辑器进行项目开发
2020/06/17 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Python txt文件如何转换成字典
2020/11/03 Python
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
好邻里事迹材料
2014/01/16 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
体育专业求职信
2014/07/16 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
学校教代会开幕词
2016/03/04 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript