AngularJS的作用域Scope

1.简介

angularjs启动并生成视图时,会根据ng-app元素和$RootScope进行绑定。$RootScope是所有$scope对象的最上层,是angularjs中最接近于全局作用域的对象。

$scope对象就是一个普通的javascript对象,在angularjs中充当数据模型,但与传统的数据模型又不一样,$scope并不负责处理和数据操作,它只是视图和HTML之间的桥梁。

$scope的所有属性都可以自动被视图访问到。

作用域是构成AngularJS应用的核心,它与应用的数据模型相关联,同时也是表达式执行的上下文。作用域包含了渲染视图所需的功能和数据,它是所有视图的唯一源头,可以将作用域理解成视图模型。

  $scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。angularjs将$scope设计成和DOM类似的结构,因此$scope可以进行嵌套,也就是说我们可以引用父级$scope中引用父级$scope中的属性和方法。

2.作用域功能

  • 提供观察者以监视数据模型的变化。
  • 可以将数据模型的变化通知给整个应用,设置是系统外的组件。
  • 可以进行嵌套,隔离业务功能和数据。
  • 给表达式提供运算时所需的执行环境。

3.会创建子作用域的指令

  AngularJS中大部分指令不会创建子作用域,但是以下指令例外,开发时必须注意作用域嵌套的相关问题,否则很容易出错。

  • ng-include 
    创建一个新的子作用域,并且会继承父作用域。
  • ng-switch 
    创建一个新的子作用域,并且会继承父作用域。
  • ng-repeat 
    为每一个item都创建一个子作用域,全部都会继承父作用域。
  • ng-controller 
    创建一个新的作用域,并且会继承父作用域

4.$scope生命周期

  $scope对象的生命周期处理有四个不同阶段,分别是创建,链接,更新和销毁。  

创建

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

链接

  当Angular开始运行时,所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时所需要运行的函数。这些函数被称为$watch函数,Angular通过这些函数获知何时启动时间循环。

更新

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

销毁

  当一个$scope在视图中不再需要时,这个作用域将会清理和销毁自己。(基本上不会需要你来清理作用域,但是你还是可以使用$scope上的$destroy()方法来清理作用域)。

时间: 2024-10-04 21:12:12

AngularJS的作用域Scope的相关文章

Angularjs MVC 以及 $scope 作用域 Angularjs 模块 的 run 方法 以及依赖注入中代码压缩问题

Angularjs MVC 以及 $scope 作用域 Angularjs 模块的 run 方法 以及依赖注入中代码压缩问题 1. Angularjs MVCModel:数据模型层View:视图层,负责展示Controller:业务逻辑和控制逻辑优点: 代码模块化 代码逻辑比较清晰.可移值性高,后期维护方便.代码复用,代码规模越来越大的时候,切分职责是大势所趋缺点:运行效率稍微低一些2. Angularjs $scope 作用域1. $scope 多控制器单独作用域<!DOCTYPE html>

AngularJS 深入理解 $scope 转载▼

AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50) $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $sco

angularJs的作用域和依赖注入

一.angularJs的作用域 <!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>angular概述</title> <script src="angular.min.js"></scr

AngularJs 隔离作用域

初学NG,有诸多的不解,今天看了一篇文章,原文地址:https://segmentfault.com/a/1190000002773689#articleHeader0 ,本文运行的代码也出处此. 里面讲到了自定义指令的scope参数的值有三种,true,false,{}.我按照例子将scope的值运行试验了一把,利用Chrome插件batarang分析了一波,谈谈自己的理解,有不到的地方望各位海涵. 首先,隔离作用域与继承作用域(子作用域)是不同的,隔离作用域同当前DOM的作用域是完全隔离开的

AngularJS之作用域及控制器(一)

前言 之前有接触过基本的AngularJS,未过多涉及,于是乎本系列我们来着重讲讲AngularJS,对AngularJS中重要的几大内容进行梳理并进行一些小的例子的书写.在之前项目过程中用到过avalon,但是avalon并未被广泛使用也就放弃了,至于孰最轻量,性能更好作为非专业的我就不妄下结论,lz只明白一点,业界最流行什么前端框架,招聘大部分要求会哪些框架,lz才会去学习,当然其中的乐趣也是油然而生,每一次敲代码的过程好似在浩瀚大海中探幽一番,别有一番滋味. 简短介绍 AngularJS也

angularjs 中的scope继承关系——(2)

转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include 假设在我们的 controller 中, $scope.myPrimitive = 50; $scope.myObject = {aNumber: 11}; HTML 为: <script type="text/ng-template" id="/tpl1.html&quo

AngularJS讲义 - 作用域

什么是作用域? Angular中作用域(scope)是模板以及工作的上下文环境,作用域中存放了应用模型和视图相关的回调行为.作用域是层次化结构的与相关联的DOM结构相对应.作用域可以观察表达式以及传播事件.   原文: scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical str

angualar入门学习-- 作用域$scope

作用域$scope: 是ng执行环境,视图与controller之间的胶水,双向绑定的基础 $scope提供里$watch方法,监听数据模型变化 $scope提供里$apply方法,将数据模型变化更新到视图上 1. $scope树形结构 子作用域可以添加到父作用域(类似于DOM结构),根作用域$rootScope. 可以写          $scope.$parent  父作用域 还可以写     $scope.$parent.$parent  父作用域的父作用域(有可能就到了根作用域$roo

Angularjs: call other scope which in iframe

Angularjs: call other scope which in iframe ------------------------------------------------------------------------------------------------------------ To access and communicate in two directions (parent to iFrame, iFrame to parent), in case they ar