Angularjs学习笔记5_scope和$rootScope

$rootScope
  $rootScope 是最顶级的scope,它对应着含有 ng-app 指令属性的那个DOM元素。
     app.run(function($rootScope) {
       $rootScope.name = "Ari Lerner";  $rootScope.test = new Date();
     });

    app.run函数看作是Angular应用的main方法。
    可以在view的任何地方访问这个name属性,使用模版表达式{{}},像这样 {{ name }}    
  Angular 应用启动并生成视图时,会将根 ng-app 元素与 $rootScope 进行绑定.$rootScope 是所有 $scope 的最上层对象,可以理解为一个 Angular 应用中得全局作用域对象, 所以为它附加太多逻辑或者变量并不是一个好主意,和污染 Javascript 全局作用域是一样的. 偶尔有一些数据希望全局应用在整个 app 中,可以将数据注入 $rootScope。因为其他 scope 都会继承 root scope,那些注入的数据对于 ng-show 这类 directive 都是可用的,就像是在本地 $scope 中的变量一样。当然,必须很小心地使用 $rootScope。特别是不要用于代码,而仅仅用于注入数据。如果非常希望在 $rootScope 写一个函数,那最好把它写到 service 里,这样只有用到的时候它才会被注入,测试起来也方便些。相反,

如果一个函数的功能仅仅是存储和返回一些数据,就不要把它创建成一个 service。

app.controller(‘myCtrl‘, function($scope, $rootScope) {
     $scope.change = function() {
      $scope.test = new Date();
     };
     $scope.getOrig = function() {
      return $rootScope.test;
     };
})
app.controller(‘myCtrl2‘, function($scope, $rootScope) {
     $scope.change = function() {
          $scope.test = new Date();
     };
     $scope.changeRs = function() {
          $rootScope.test = new Date();
     };
     $scope.getOrig = function() {
          return $rootScope.test;
     };
});  // 控制器之间共享数据,最好用 service

Scope的特性

  • Scope提供$watch方法监视Model的变化。
  • Scope提供$apply方法传播Model的变化。
  • Scope可以继承,用来隔离不同的 application components和属性访问权限。
  • Scope为Expressions的计算提供上下文。

$scope 的作用
  $scope 对象在 Angular 中充当数据模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样,因为 $scope 并不处理和操作数据,它只是建立了视图和 HTML 之间的桥梁,让视图和 Controller 之间可以友好的通讯.它的作用和功能:
  提供了观察者可以监听数据模型的变化
  可以将数据模型的变化通知给整个 App
  可以进行嵌套,隔离业务功能和数据
  给表达式提供上下文执行环境

 Scope 在 templates 模板中应该是 read-only 的,而在 controller 里应该是 write-only 的。Scope 的目的是引用 model,而不是成为 model。model 就是我们定义的 JavaScript 对象。
 $scope 实际上就是一个JavaScript对象,controller和view都可以访问它,可以利用它在两者间传递信息。在这个 $scope 对象里,我们既存储数据,又存储将要运行在view上的函数。   
   Scopes 在 AngularJS 中形成一定的层级关系,树状结构必然有一个根节点。通常我们用不到它,因为几乎每个 view 都有一个 controller 以及相对应的自己的 scope。 

执行上下文:

  在 Javascript 中创建一个新的执行上下文,实际就是用函数创建了一个新的本地上下文,在 Angular 中当为子 DOM 元素创建新的作用域时,其实就是为子 DOM 元素创建了一个新的执行上下文.

$scope 生命周期

事件循环:Angular 的‘事件‘的概念,当一个绑定了 ng-model 的 input 值发生变化时,或者一个 ng-click 的 button 被点击时,Angular 的事件循环就会启动.
事件就在 Angular 执行上下文中处理,$scope 就会对定义的表达式求值.此时事件循环被启动, Angular 会监控应用程序内所有对象,脏值检查循环也会启动.
4个阶段:
1. 创建
    控制器或者指令创建时, Angular 会使用 $injector 创建一个新的作用域,然后在控制器或指令运行时,将作用域传递进去.
2. 链接
    Angular 启动后会将所有 $scope 对象附加或者说链接到视图上,所有创建 $scope 对象的函数也会被附加到视图上.这些作用域将会注册,
    当 Angular 上下文发生变化时需要运行的函数.也就是 $watch 函数, Angular 通过这些函数或者何时开始事件循环.
3. 更新
    一旦事件循环开始运行,就会开始执行自己的脏值检测.一旦检测到变化,就会触发 $scope 上指定的回调函数
4. 销毁
    通常来讲如果一个 $scope 在视图中不再需要, Angular 会自己清理它.当然也可以通过 $destroy() 函数手动清理.

创建一个$scope 对象

给DOM元素安上一个controller对象,使用ng-controller 指令属性:
    <div ng-controller="MyController">
     {{ person.name }}
    </div>    
    app.controller(‘MyController‘, function($scope) {
     $scope.person = {
      name: "Ari Lerner"
     };
    });    
 ng-controller=‘MyController‘属性的DOM元素的任何子元素里访问这个person 对象

原型继承:

所有scope都遵循原型继承(prototypal inheritance),这意味着它们都能访问父scope们。对任何属性和方法,如果AngularJS在当前scope上找不到,就会到父scope上去找,如果在父scope上也没找到,就会继续向上回溯,一直到$rootScope 上。
唯一的例外:有些指令属性可以选择性地创建一个独立的scope,让这个scope不继承它的父scope们。

时间: 2024-12-23 23:45:00

Angularjs学习笔记5_scope和$rootScope的相关文章

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

angularjs 学习笔记(一) -----JSONP跨站访问

1.  下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中. 2.  制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代). 3.  backmockup站点添加以下HTTP头 Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:origin,x-req

angularjs 学习笔记 -----结构定义

1.  Module使用方法 var APP =angular.module('fontApp',['ngResource', 'ngRoute', 'ngSanitize']); APP为定义的别名,之后的调用都应尽量使用该别名 'fontApp' ng-app="fontApp" 新版本angular中route被分离出来,各个被使用的Providerdou需要在此处声明. 大型应用应该拆分模块来做,先定义一个服务模块,然后再加载它 angular.module('xmpl.ser

-_-#AngularJS学习笔记

AngularJS学习笔记 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> .done{display:none} .ignore{color:#999} </style> <ul> <li class="

AngularJs学习笔记--Guide教程系列文章索引

在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看不懂,希望大家在参观的过程中指出其中的错误).经过1个多月断断续续的努力,终于把Guide里面的文章基本上都弄出来.Guide中的部分章节,由于重复的部分似乎有点多,而且篇幅较短,这里就没有列出来. 文章列表如下: AngularJs学习笔记--bootstrap AngularJs学习笔记--ht

AngularJS学习笔记filter

filter是对数据进行过滤操作,比如按某个字段搜索.格式化数据等等,是一个非常有用的接口.下面就简单介绍下它的用法. AngularJS自带的filter接口,|是filter的分隔符,参数用:分隔: currency,格式化number,货币化,默认是转化成美元  param(number,symbol),返回值将会把数字每3位加一个逗号 <input type="number" ng-model="amount"/> <p>默认美元:{

AngularJS 学习笔记 -- 指令(Directive)

AngularJS 指令学习笔记 AngularJS怎样处理指令其实是依赖于指令定义时返回的对象属性的,所以要想深入理解如何定义一个指令,首相需要理解指令定义时各个参数的含义. 完整的AngularJS指令参数 angular.module('app', []) .directive('demoDirective', function (){ // 依据官方规范,指令的定义时应该严格遵循驼峰式命名规则,使用时采用'-'连接单词 return { restrict : String in ['E'