AngularJS问询AngularJS的$scope的工作规律和生命周期(转发)

$scope 的运用贯穿整个 Angular App
应用,它与数据模型相关联,同时也是表明式执行的内外文.有了 $scope
就在视图和控制器之间确立了八个大路,基于成效域视图在改动数据时会马上更新
$scope,同样的 $scope 产生变动时也会即时重新渲染视图.

    有了 $scope 那样贰个大桥,应用的政工代码能够都在 controller
中,而数据都存放在controller 的 $scope 中.

AngularJS 1

 

$scope是七个把view(一个DOM成分)连结到controller上的指标。在大家的MVC结构里,这几个$scope
将变成model,它提供一个绑定到DOM成分(以及其子成分)上的excecution
context。

就算听起来有个别复杂,但 $scope
实际上正是1个JavaScript对象,controller和view都能够访问它,所以大家得以采用它在双边间传递音信。在这一个$scope 对象里,我们既存款和储蓄数据,又囤积将要运营在view上的函数。

各样Angular应用都会有二个 $rootScope。这几个 $rootScope
是最一流的scope,它对应着含有 ng-app 指令属性的那多少个DOM元素。

设若页面上从未有过分明性设定 $scope ,Angular 就会把数据和函数都绑定到那里,
第②局地中的例子正是靠这或多或少打响运营的。

在这一个事例里,大家将使用 $rootScope
。在main.js文件里,大家给那几个scope加三个name属性。把这几个函数放进app.run函数里推行,我们就确认保障了它能在行使的任何部分从前被执行。你能够把app.run函数看作是Angular应用的main方法。

app.run(function($rootScope) {
 $rootScope.name = "Ari Lerner";
});

  

 

现行反革命,我们能够在view的任何地方访问这么些name属性,使用模版表明式{{}};

$rootScope Angular 应用运转并生成视图时,会将根 ng-app 成分与 $rootScope
举办绑定.$rootScope 是兼备 $scope 的最上层对象,能够精晓为1个 Angular
应用中得全局作用域对象,所以为它附加太多逻辑或然变量并不是一个好主意,和污染
Javascript 全局成效域是千篇一律的.

$scope 的作用 $scope 对象在 Angular 中担纲数据模型的功用,也正是形似 MVC 框架中 Model
得剧中人物.但又不完全与普通意义上的数据模型一样,因为 $scope
并不处理和操作数据,它只是建立了视图和 HTML 之间的大桥,让视图和
Controller 之间能够协调的通信.

再进一步系统的撤销合并它的效应和效益:

  • 提供了观察者能够监听数据模型的转移
  • 能够将数据模型的变型通告给全部 App
  • 能够展开嵌套,隔断业务职能和数据
  • 给表明式提供上下文执行环境

AngularJS,在 Javascript
中创造二个新的施行上下文,实际便是用函数成立了四个新的当地上下文,在
Angular 中当为子 DOM 成分创制新的效应域时,其实正是为子 DOM
成分成立了叁个新的进行上下文.

$scope 生命周期 Angular 中也有二个’事件’的概念,比如当三个绑定了 ng-model 的 input
值爆发变化时,也许1个 ng-click 的 button 被点击时,Angular
的轩然大波循环就会运行.事件循环是 Angular
中12分可怜宗旨的一个定义,因为不是本文大旨所以不多说,感兴趣的能够友善看看资料.那里事件就在
Angular 执行上下文中处理,$scope
就会对定义的表达式求值.此时事变循环被运维, Angular
会监察和控制应用程序内有所指标,脏值检查循环也会运转.

$scope 的生命周期有伍个级次:

  1. 创建

控制器可能指令创制时, Angular 会使用 $injector
创立3个新的效能域,然后在控制器或指令运营时,将成效域传递进去.

  1. 链接

Angular 运转后会将享有 $scope 对象附加恐怕说链接到视图上,全部创制 $scope
对象的函数也会被增大到视图上.那几个作用域将会登记当 Angular
上下文发生变化时索要周转的函数.也等于 $watch 函数, Angular
通过那一个函数也许曾几何时开首事件循环.

  1. 更新

一旦事件循环开端运营,就会初步施行本人的脏值检查和测试.一旦检查和测试到变化,就会触发
$scope 上点名的回调函数

  1. 销毁

普普通通来讲假设三个 $scope 在视图中不再须求, Angular
会自个儿清理它.当然也得以经过 $destroy() 函数手动清理.

ng-controller

要分明创造三个$scope
对象,大家将要给DOM成分设置一个controller对象,使用的是ng-controller
指令属性:

<div ng-controller="MyController">
 {{ person.name }}
</div>

 

ng-controller指令给外市的DOM成分制造了二个新的$scope
对象,并将以此$scope 对象涵盖进外层DOM成分的$scope
对象里。在下边包车型大巴事例里,这些外层DOM成分的$scope 对象,正是$rootScope
对象。那个scope链是如此的:

AngularJS 2

当今,MyController 给我们建立了二个足以从DOM元素内部平素访问的$scope
对象。上边大家在的那么些$scope 里成立一个person对象,在main.js中:

app.controller('MyController', function($scope) {
 $scope.person = {
  name: "Ari Lerner"
 };
});

现在大家能够在有ng-controller=’MyController’属性的DOM元素的其它子元素里拜访这些person
对象,因为它在$scope上。
除了那些之外一个不等,全数scope都遵守原型继承(prototypal
inheritance),那代表它们都能访问父scope们。对任何性质和措施,假设AngularJS在眼下scope上找不到,就会到父scope上去找,假若在父scope上也没找到,就会持续开拓进取回溯,向来到$rootScope
上。

唯一的两样:有个别指令属性能够选取性地成立二个独立的scope,让这些scope不三番五次它的父scope们。

举个例子,若是我们有2个ParentController ,含有一个person
对象,又有一个ChildController 想要访问那么些目的:

app.controller('ParentController', function($scope) {
 $scope.person = {greeted: false};
});

app.controller('ChildController', function($scope) {
 $scope.sayHello = function() {
  $scope.person.greeted = true;
 }
});

  

当大家在view里把ChildController 绑定到ParentController
之下,在子成分里大家就能访问ParentController
成立的父scope的属性,像访问ChildController 本身的scope中的属性一样:

div ng-controller="ParentController">
 <div ng-controller="ChildController">
  <input type="text" ng-model="person.name" placeholder="Name"></input>
  <a ng-click="sayHello()">Say hello</a>
 </div>
 {{ person }}
</div>

  

相关文章