这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等。

$rootScope.Scope

可以使用$injector通过$rootScope关键字检索的一个根作用域。

可以通过$new()方法创建子作用域。(大多子作用域是在HTML模板被执行编译时自动生成)

格式:$rootScope.Scope([Providers],[instanceCache])

[Providers]:当前作用域需要被提供的服务工厂地图。默认是ng。

[instanceCache]:为需要providers追加/重写的服务提供预实例化服务。

方法

$new(isolate);

创建一个新的子作用域。

父作用域将会广播$digest()和$digest()事件。作用域可以使用使用$destroy()从作用域的层级结构中移除。

$destroy()使其所需的范围和它的子作用域范围内永久地从父作用域分离从而停止参与模型变化检测和侦听通知调用。

isolate:boolean类型。如果值是true,那么这个scope不会从父scope继承原型。作用域是独立的,在这里不能看见父scope的属性。

当写小窗户组件的时候,这将是很实用的去防止不小心读取到其父级的状态。

$watch(watchExpression,[listener],[objectEquality]);

注册一个监听器的回调函数,该函数在watchExpression变化的时候被执行。

watchExpressions表达式每次执行都会产生一次$digest(),并且返回一个将会被监听的值。($digest()发现watchExpressions发生变化而执行多次,并且每次都是幂等的)

监听只有在当前的watchExpressions与之前的值不想等是被调用。变动是根据angular.equals函数判断的。需要保存对象比较后的值,也需要用到angular.copy。这也意味着看复杂的选项将不利于记忆和性能影响。

监听可能会改变模型,这可能会引发其他监听的变化。Ng会一直执行直到监听的值稳点。重播迭代极限是10,为了防止陷入无限循环的死锁。

watchExpressions:string或者function类型。每个$digest循环周期的表达式,返回值的变化会触发调用监听。

listener: watchexpression的返回值改变时发生回调。

objectEquality:使用angular.equals代替引用相等性比较对象相等比较 (深度监听)。

$watchGroup(watchExpressions,listener);

针对watchexpressions数组变量的$watch()。集合里的任何一个表达式变化都将引发监听的执行。

watchExpressions数组里的每一项都被标准的$watch()操作观察,并且审查每一次的$digest()去观察每一项是否变化。

当watchExpressions数组里的任何一项发生变化即执行。

$watchCollection(obj,listener);

浅度的观察对象属性,并且在其变化时执行(对于数组,这意味着看数组项;对于对象,这意味着看属性)。如果检测到更改,则该侦听器将被触发。

$digest();

处理所有的当前作用域和它的子作用域的监听。因为监听可能改变模型,所以$digest()会一直执行知道模型稳定。这意味这他可能进入无限循环。如果迭代次数超过10,这个函数将抛出“Maximum iteration limit exceeded”错误。

$destroy();

从父域中删除当前的scope(及其所有的子scope)。删除意味着$digest()不再传播到目前作用域及其子作用域。删除也意味着目前的作用域符合垃圾集合的条件。

$eval([expression],[locals]);

在当前作用域上执行表达式并返回结果。表达式的任何异常将传播(捕获)。在求Angular表达式的值的时候有用。

$evalAsync([expression]);

在稍后的时间点上执行当前范围的表达式(异步)。

$apply([exp]);

$apply() 用来在Angular框架外执行angular内部的表达式。(例如浏览器的DOM事件,setTimeout,XHR或第三方库)。

$on(name,listener);

监听一个给定类型的事件。

name:监听的事件名。

listener:当事件发生时调用的函数。

$emit(name,args);

向上级已注册的作用域传播指定的事件,直到根作用域。

name:发出的事件名称。

args:一个或多个可选参数,将传递到事件侦听器。

$broadcast(name,args);

向下级已注册的作用域广播指定的事件。

name:发出的事件名称。

args:一个或多个可选参数,将传递到事件侦听器。

$new,$destroy,$watch使用代码

  <div ng-app="Demo">
<div ng-controller="testCtrl as ctrl">
<input ng-model="ctrl.text.words" />
<input ng-list="," ng-model="ctrl.list" />
</div>
</div>
  (function () {
angular.module("Demo", [])
.run(["$rootScope",rootScope])
.controller("testCtrl",["$scope",testCtrl])
function rootScope($rootScope){
var rootScope = $rootScope;
var _scope = rootScope.$new();
_scope.value = "Hello World";
_scope.$destroy();//$$destroyed:true
};
function testCtrl($scope){
var vm = this;
vm.text = { words:"Hello World",id:1};
$scope.$watch("ctrl.text",function(n,o){
console.log(n,o); // n 新值 o 旧值
},true);
vm.list = ["a","b","c","d"];
$scope.$watchCollection("ctrl.list",function(n,o){
console.log(n,o); // n 新值 o 旧值
});
};
}());

$on,$emit,$broadcast使用代码:

  <div ng-app="Demo">
<div ng-controller="testCtrl as ctrl">
{{ctrl.number||'Here where receive a number from childScope'}}
<div ng-controller="childCtrlOne as childOne">
<input type="button" ng-click="childOne.toFatherScope()" value="click me" />
</div>
<div ng-controller="childCtrlTwo as childTwo">
{{childTwo.number||'Here where receive a number from fatherScope'}}
</div>
</div>
</div>
  (function () {
angular.module("Demo", [])
.controller("testCtrl",["$scope",testCtrl])
.controller("childCtrlOne",["$scope",childCtrlOne])
.controller("childCtrlTwo",["$scope",childCtrlTwo])
function testCtrl($scope){
var vm = this;
$scope.$on("toFather",function(e,v){
vm.number = v;
$scope.$broadcast("toChild",v);
})
};
function childCtrlOne($scope){
var vm = this;
var count = 0;
vm.toFatherScope = function(){
count += 1;
$scope.$emit("toFather",count);
}
}
function childCtrlTwo($scope){
var vm = this;
$scope.$on("toChild",function(e,v){
vm.number = v;
})
}
}());

大致就学习归总出来这些,果然自己去api 翻成中文理解一遍,再写代码运行一遍,会对这些函数的意思和用法了解的多。简单的说下对scope的理解,就跟树结构一样,从rootScope作为 根节点开始扩散,有父子关系的,有兄弟关系的,而且带有继承,子scope继承父scope上的属性...

Angular - - $rootScope.Scope的更多相关文章

  1. AngularJs $rootScope.Scope 作用域操作

    这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等. $rootScope.Scope 可以使用$injector通过$rootScope关键字检索的一个根作用域. 可以通 ...

  2. Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

    Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...

  3. AngularJS的$rootScope和$scope联系和区别

    scope是html和单个controller之间的桥梁,数据绑定就靠他了. rootscope是各个controller中scope的桥梁.用rootscope定义的值,可以在各个controlle ...

  4. AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系

    Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁 ...

  5. AngularJS Scope(作用域)

    1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...

  6. Angular $watch

    如果想在某个属性发生变化的时候执行某些操作,那么scope.$watch是最佳选择 https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$w ...

  7. Angularjs scope

    $scope: var myapp = angular.module('myapp', []); myapp .controller('parent', function ($scope,$timeo ...

  8. 【原创】angularjs1.3.0源码解析之scope

    Angular作用域 前言 之前我们探讨过Angular的执行流程,在一切准备工作就绪后(我是指所有directive和service都装载完毕),接下来其实就是编译dom(从指定的根节点开始遍历do ...

  9. Angularjs Scope 原型链

    我们知道scope是可以继承的.scope的继承和js原型链是同一个概念. <div ng-controller="parentCtrl"> {{name}} < ...

随机推荐

  1. 【学生成绩管理系统】 大二c语言作业

    几年前写的了,只能在命令行窗口运行,虽然比较挫,还是有一定参考价值... #include <cstdio> #include <conio.h> #include <i ...

  2. 认识DWR

    Direct Web Remoting DWR的官网:http://directwebremoting.org/dwr/index.html 什么是DWR? DWR是一个Java库,使服务器上的Jav ...

  3. CG之refract函数简单实现

    CG的refract函数定义如下: refract(I, N, eta) 根据入射光线方向I,表面法向量N和折射相对系数eta,计算折射向量.如果对给定的eta,I和N之间的角度太大,返回(0,0,0 ...

  4. Jackson基础笔记

    具体内容待完善......手抖,发错了! 一.基本使用 1. bean->jsonStr 2. jsonStr->bean 二.注解使用 三.复杂对象转换 四.其他细节 读取json文本.

  5. 创建mysql数据库的时候指定编码

    CREATE DATABASE xxx DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

  6. Windows上mxnet实战深度学习:Neural Net

    前提: 假设已经在Windows上安装配置好mxnet和python语言包. 假设mxnet安装目录为D:\mxnet 假设已安装好wget 可以参考 这篇文章 打开Windows的命令提示符: 执行 ...

  7. gtk

    GTK官网:www.gtk.org sudo apt-get install build-essential 安装GTK开发套件: sudo apt-get install libgtk2.0-dev ...

  8. WebRequest调用

    WebRequest支持不同的浏览器对象,可以在底层使用不同的XMLHttpRquest方式调用Web服务. Time.aspx <%@ Page Language="C#" ...

  9. nginx 支持pathinfo

      location ~ \.php { #去掉$ root H:/PHPServer/WWW; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.ph ...

  10. mysql之SQL---存储过程

    1.存储过程简介  我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集,经编译后存储在数据库中,用 ...