• 第四章-作用域


    作用域(scope)是构成AngularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的。 

     

    应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑,控制器方法和视图属性的地方。 

     

    作用域是视图和控制器之间的胶水,在应用将视图渲染并呈献给用户之前,视图中的模板会和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给AngularJS。这个功能让XHR请求等promise对象的实现变得非常容易。 

     

    AngularJS将$scope设计成和DOM类似的结构,因$scope可以进行嵌套,也就是说我们可以引用父级$scope中的属性。 

     

    将应用的业务逻辑都放在控制器中,而将相关的数据都放在控制器的作用域中,这是非常完美的架构。 

     

    视图和$scope的世界 

    AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。 

     

    $rootScope是AngularJS中最接近全局作用域的对象。在$rootScope上附加太多业务逻辑并不是好主意,这与污染JavaScript的全局作用域是一样的。 

     

    $scope对象就是一个普通的JavaScript对象,我们可以在其上随意修改或者添加属性。 

     

    $scope对象在AngularJS中充当数据模型,但与传统的数据模型不一样,$scope并不负责处理和操作数据,它只是视图和HTML之间的桥梁,他是视图和控制器之间的脱水。 

     

    就是HTML而已 

    可以在AngularJS应用的模板中使用多种标记,包括下面这些: 

    1. 指令:将DOM元素强为可复用的DOM组件的属性或元素。 

    2. 值绑定:模板语法{{}}可以将表达式绑定到视图上。 

    3. 过滤器:可以在视图中使用的函数,用来进行格式化。 

    4. 表单控件:用来检验用户输入的控件。 

     

    作用域能做什么 

    作用域有以下的基本功能: 

    1. 提供观察者以监视数据模型的变化; 

    2. 可以将数据模型的变化通知给整个应用,甚至是系统外的组件; 

    3. 可以进行嵌套,隔离业务功能的数据; 

    4. 给表达式提供运算时所需的执行环境。 

    开发AngularJS应用的大部分工作内容,就是构建作用域及其相关的功能。 

    作用域包含了渲染视图时所需要的功能和数据,他是所有视图的唯一源头。可以将作用域理解成视图模型(view model) 

     

    我们可以不将变量设置在$rootScope上,而是用控制器显式创建一个隔离的子$scope对象,把它设置到这个子对象上。使用ng-controller指令可以将一个控制器对象附加到DOM元素上。 

    <div ng-app='myApp'> 

     <div ng-controller="myController"> 

      <h1>Hello{{name}}</h1> 

     </div> 

    </div> 

    我们可以创建一个控制器来管理与其相关的变量 

    Angular.module('myApp',[]).controller('myController',function($scope){ 

     $scope.name='Ari'; 

    }); 

    ng-controller指令为这个DOM元素创建了一个新的$scope对象,并将它嵌套在$rootScope中。 

     

    $scope的生命周期 

    AngularJS关心的事件发生在浏览器中时,比如用户在通过ng-model属性监控的输入字段中输入,或者带有ng-click属性的按钮被点击时,AngularJS的事件循环都会启动。这个事件将在Angular执行上下文中处理。 

     

    每当事件被处理时,$scope就会对定义的表达式求值。此时事件循环会启动,并且Angular应用会监控应用程序内的所有对象,脏值检测循环也会运行。 

     

    $scope对象的生命周期处理有四个不同阶段。 

    • 创建 

    在创建控制器或者指令时,AngularJS会用$injector创建一个新的作用域,并在这个新建的控制器或指令运行时将作用域传递进去。 

    • 链接 

    Angular开始运行时,所有的$scope对象都会附加或者连接到视图中,所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文发生变化时需要运行的函数 

    这些函数被称为$watch函数,Angular通过这些函数获知何时启动事件循环。 

    • 更新 

    当事件循环运行时,它通常执行在顶层$scope对象上(被称为$rootScope),每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化,$scope对象就会触发指定的回调函数 

    • 销毁 

    当一个$scope在视图中不再需要时,这个作用域将会清理和销毁自己。 

    尽管永远不会需要清理作用域,因为Angular会为你处理,但是知道是谁创建了这个作用域还是有用的,因为你可以使用空上$scope上叫做$destory()的方法来清理这个作用域。 

     

    指令和作用域 

    指令在AngularJS中被广泛使用,指令通常不会创建自己的$scope,但也有例外,比如ng-controller和ng-repeat指令会创建自己的子作用域并将他们附加到DOM元素上。 

  • 相关阅读:
    HTTP 无法注册 URL http://+:xxxxx/ServicesName/。进程不具有此命名空间的访问权限
    C语言中宏的一些特别用法
    static和const的比较和解释
    堆和栈的区别
    c++中const用法
    链表常见笔试题
    自绘实现半透明水晶按钮 .
    C++面试题
    C/C++面试题大汇总
    C++ 值传递、指针传递、引用传递详解
  • 原文地址:https://www.cnblogs.com/EastWind/p/5916550.html
Copyright © 2020-2023  润新知