打探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
实际上就是一个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 的卓绝上层对象,可以理解吧一个 Angular
应用被得全局作用域对象,所以为它附加太多逻辑或者变量并无是一个吓主意,和污染
Javascript 全局作用域是同一的.

$scope 的作用 $scope 对象在 Angular 中担任数据模型的作用,也就是是相似 MVC 框架中 Model
得角色.但又不了与一般意义上的数据模型一样,因为 $scope
并无处理与操作数据,它就是成立了视图和 HTML 之间的大桥,让视图和
Controller 之间可以协调的通讯.

再进一步系统的分割它的用意及成效:

  • 供了观察者可以监听数据模型的别
  • 足用数据模型的生成通知受通 App
  • 得展开嵌套,隔离业务职能跟数码
  • 让表达式提供上下文执行环境

于 Javascript
中创造一个初的履行上下文,实际就是用函数创建了一个初的本土及下文,在
Angular 中当为子 DOM 元素创建新的意图域时,其实就算是为子 DOM
元素创建了一个新的实践上下文.

$scope 生命周期 Angular 中为发一个’事件’的定义,比如当一个绑定了 ng-model 的 input
值发生变化时,或者一个 ng-click 的 button 被点击时,Angular
的风波循环就会起来动.事件循环是 Angular
中格外大核心之一个概念,因为无是本文主旨所以无多说,感兴趣之足协调看资料.这里事件就是当
Angular 执行上下文中处理,$scope
就会见指向定义的表达式求值.此时事件循环为启动, Angular
会监控应用程序内享有目标,脏值检查循环为会见开始动.

$scope 的生命周期有4单等级:

  1. 创建

控制器或者指令创建时, Angular 会使用 $injector
创建一个初的作用域,然后在控制器或指令运行时,将作用域传递进去.

  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上探寻不交,就见面暨父scopeAngularJS上去寻找,如果当父scope上呢没有找到,就会继续发展回溯,一直顶$rootScope
上。

唯一的异:有些指令属性可以选择性地开创一个独自的scope,让这个scope不连续它们的父scope们。

举个例,假而我们发出一个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>

  

相关文章