关闭

学习angularjs的总结与心得-作用域

159人阅读 评论(0) 收藏 举报
分类:
以前在学习angularjs的时候学习到$scope和$rootScope的时候,看了一下用法就感觉这个作用域不就和原生的局部、全局作用域是差不多的,然后就没有细看,这段时间真正用到作用域方面的时候发现还是有区别的。
首先$scope是需要注入到控制器中的,作用域也就是当前控制器的范围内适用;如果没有寻找到则会沿着作用域链向上搜索,直到根作用域$rootScope。scope是html和单个controller之间的桥梁,数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值,可以在各个controller中使用。
而且,$rootScope是由angularJS加载模块的时候自动创建的,每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 $injector中。也就是说通过 $injector.get("$ rootScope ");能够获取到某个模块的根作用域。更准确的来说,$rootScope是由angularJS的核心模块ng创建的。
例子一:
    var module=angular.module('app',[]);
    var has_rootScope1 = angular.injector(['app','ng']);
    console.log(has_rootScope1.has("$rootScope")); //true

    var has_rootScope2 = angular.injector(['app']);
    console.log(has_rootScope1.has("$rootScope")); //false

    var has_rootScope3 = angular.injector(['ng']);
    console.log(has_rootScope1.has("$rootScope")); //true
    上例说明:
        $tootScope由核心模块ng创建,并以服务的形式存在于injector中。如果创建injector的时候,指定了ng模块,那么该injector中就包含$toorScope服务;否则不包含。
例子二:
    //控制器里的$injector,是有angular框架自动创建的
    var module=angular.module('app',[]);
    module.controller('ctrl',function($scope,$injector,$rootScope){
        $rootScope.name = 'lswl';
    });
    //在创建一个$injector,依赖于app和ng模块
    var myInjector = angular.injector(['app','ng']);
    var rootScope = myInjector.get('$rootScope');
    console.log($rootScope.name); //undefined
    上例说明:angular.injector()可以调用多次,每次都返回新的injector对象。所以我们自己创建的injector对象和angular框架自动创建的$injector不是同一个对象,那么得到的$rootScope也就不是同一个;由此可见,$rootScope的作用域不是我们想象中的全局作用域。
例子三:
     angular.module('app',[])
     .controller('ctrl',function($scope,$injector,$rootScope){
        console.log($scope.$parent == $rootScope); //true
    });
    上例说明:
        ng-controller指令给所在的DOM元素创建了一个新的$scope对象,并作为$rootScope的子作用域;$scope是由$rootScope创建的,$scope不会保护在$injector中。
例子四:
    //分别记住变量,用来判断跨控制器是否相等
    var my_rootScope = null;
    var my_scope = null;
    var my_injector = null;
    var module = angular.module('app',[]);
    module.controller('ctrl1',function($scope,$rootScope,$injector){
        $rootScope.name = 'lswl';
        my_rootScope = $rootScope;
        my_scope = $scope;
        my_injector = $injector;
    });
    module.controller('ctrl2',function($scope,$rootScope,$injector){
        console.log(my_rootScope == $rootScope); //true
        console.log(my_injector == $injector); //true
        console.log(my_scope == $scope); //false
    });
    上例说明:
        ng-app定义了一个angular模块,每个模块只有一个$rootScope,只有一个$injector,但可以有多个$scope。
        弄清了这三者的关系,我们看下angular提供的两个API,一个是scope(),一个是injector();使用angular.element()返回的DOM对象,都会包含这两个方法,用来获取与之关联的scope()和injector();
        由于每个模块的injector是唯一的,所以angular.elment().injector()直接返回元素所在模块的injector;
        angular.element().scope()可以获取到当前的scope或父scope;如果当前元素有scope,则返回自己的scope;如果没有则向父级方向寻找。如果找不到则返回rootScope;即返回作用域链上,距离该元素最近的scope。
1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

关于AngularJS学习整理---浅谈$scope(作用域) 新手必备!

作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正。     $scope(作用域),为AngularJS中MVC的核心,整理起来很麻烦, 看着大神们...
  • wl11295210
  • wl11295210
  • 2017-02-17 09:15
  • 2043

创建自己的AngularJS - 作用域继承(一)

作用域作用域继承(一)Angular作用域继承机制直接建立在Javascript原型继承基础上,并在其根部加入了一些内容。这意味着当你理解了Javascript原型链后,将对Angular作用域继承有深入了解。根作用域到目前为止,我们一直在和一个作用域对象打交道,该作用域使用Scope构造函数创建:...
  • fangjuanyuyue
  • fangjuanyuyue
  • 2016-04-26 17:22
  • 7124

AngularJS 指令的 Scope (作用域)详解

#### 之前写指令的时候对于scope的配置虽然都知道都用过,但是总是记不太清,配置的时候总要百度下看下说明。个人感觉[一招制敌 - 玩转 AngularJS 指令的 Scope (作用域)](https://segmentfault.com/a/1190000002773689)这篇文章写的很...
  • lzr_must
  • lzr_must
  • 2016-10-18 22:36
  • 303

AngularJS 作用域Scope的继承

转载自:http://www.angularjs.cn/A09C 以下方式会创建新的子作用域,并且进行原型继承: ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用scope: true和transclude: ...
  • zx007fack
  • zx007fack
  • 2015-06-07 15:16
  • 2656

angularjs学习总结 详细教程

1 前言 前端技术的发展是如此之快,各种优秀技术、优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢。 AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档,一...
  • yy374864125
  • yy374864125
  • 2014-11-21 15:15
  • 59393

C#学习心得与自我反思

今天都学了什么知识呢,想知道么,也不卖关子了,今天呢学习了变量与分支语句、循环、数组、枚举(enum),结构(struct)等知识,这些知识跟java差不多,没什么区别,枚举呢,本来就不是很好,所以就仔细看了看,还是有收获的,感觉理解又加深了点,但是运用觉得还是很生疏,因为用的少,多用用就会了,枚举...
  • MaBackspace
  • MaBackspace
  • 2016-06-28 19:25
  • 583

java学习总结及心得体会

java语言学习总结
  • u010331406
  • u010331406
  • 2015-08-02 16:41
  • 4774

hadoop 的MapReduce原理和学习心得

mapreduce是hadoop的核心组成,是专门用于数据计算。主要掌握 map、reduce 函数的特点、如何写函数。 我的开发环境是在eclipse,运行程序的时候经常会出现 java 内存不足的情况,需要修改ecplise的jdk使用自己安装的JDK就行。 对于 Hadoop 的 map 函数...
  • wuzhilon88
  • wuzhilon88
  • 2013-12-22 15:10
  • 4767

Java中IO流学习总结

Java中IO流学习总结一.IO流中的结构 字符流:顾名思义,该流只能处理字符,但处理字符速度很快 字节流:可以处理所有以bit为单位储存的文件,也就是说可以处理所有的文件,但是在处理字符上的速度不如字符流 二.IO流的具体使用 从各种输入流到各种输出流 注:其实在各个不同的类型中,输入流到输出流...
  • Yue_Chen
  • Yue_Chen
  • 2017-05-26 18:00
  • 218

angularjs中的隔离作用域理解以及绑定策略

Cursor游标:  DBQuery.shellBatchSize :指定默认的迭代值 var myCursor = db.inventory.find().noCursorTimeout():指定cursor不过期,除非使用cursor的close方法或者迭代完成了cursor结果
  • liangklfang
  • liangklfang
  • 2016-05-04 15:24
  • 3302
    个人资料
    • 访问:1702次
    • 积分:71
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论