Angular之作用域

一、$rootScope和$scope

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

  $rootScope是Angular中接近全局作用域的对象。$scope在Angular中充当数据模型,在视图与控制器之间充当桥梁的作用。

  以$rootScope的方式:

<!doctype html>
<html>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
   <body>
    <div ng-app="myApp">
      <h1>Hello {{ name }}!</h1>
    </div>
    <script type="text/javascript" src="controller.js"></script>
  </body>
</html>

controller.js:
 angular.module("myApp",[]).run(function($rootScope){
     $rootScope.name=‘word‘;
 })

  以$scope的方式:

<div ng-app="myApp">
        <div ng-controller="mycontroler">
             <h1>Hello {{ name }}!</h1>
        </div>

    </div>
    <script type="text/javascript" src="controller.js"></script>

controller.js:
 angular.module("myApp",[]).controller(‘mycontroler‘,function($scope){
     $scope.name=‘scope word‘;
 })

  注意:ng-controller指令附加到一个DOM元素上,会为这个DOM元素创建一个新的$scope对象,并将它嵌入到$rootScope对象中.

二、$scope对象的生命周期

  1. 创建:在创建控制器或指令时,AngularJS会用$injector创建一个新的作用域,并在这个新的控制器或指令运行时将作用域传递进去。
  2. 链接:当Angular开始运行时,所有$scope对象都会附加或者连接到视图中。所有创建$scope对象的函数也会将自身附加到视图中,这些作用域将会注册当Angular应用上下文发生变化时需要运行的函数。(这些函数被称作$watch函数,Angular通过这些函数知道何时启动事件循环)
  3. 更新:当事件循环运行时,它通常执行在顶层$scope对象上(即$rootScope),每个子作用域都执行自己的脏值检测。如果检测到任意变化,$scope对象就会触发指定的回调函数。
  4. 销毁:当一个$scope在视图中不在需要时,这个作用域将会清理和自己销毁(Angular执行销毁),自己也可以根据$destory()来清理此作用域。
时间: 2024-10-11 23:09:11

Angular之作用域的相关文章

Angular之作用域与事件(转)

学习Angular,首先要理解其作用域机制. Angular应用是分层的,主要有三个层面:视图,模型,视图模型.其中,视图很好理解,就是直接可见的界面,模型就是数据,那么视图模型是什么呢?是一种把数据包装给视图调用的东西. 所谓作用域,也就是视图模型中的一个概念. 根作用域 在第一章中,有这么一个很简单的数据绑定例子: <input ng-model="rootA"/> <div>{{rootA}}</div> 当时我们解释过,这个例子能够运行的的原

Angular JS 作用域和数据绑定

作用域 作用域($scope)和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方. 作用域是视图和控制器之间的胶水.在应用将视图渲染并呈献给用户之前,视图中的模板会和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给AngularJS. 基于动态绑定,我们在修改视图数据时立刻更新$scope,而$scope发生变化时也会立刻渲染视图. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

简话Angular 02 Angular控制器-作用域嵌套

1. html代码 <div ng-controller="ParentController"> <h3><strong>父控制器</strong></h3> <label>姓名: </label> <input type="text" ng-model='person.name'> <label>年龄: </label> {{person.age

AngularJS作用域

AngularJS作用域 一.概要 在AngularJS中,子作用域(child scope)基本上都要继承自父作用域(parent scope). 但,事无绝对,也有特例,那就是指令中scope设置项为对象时,即scope:{…},这将会让指令创建一个并不继承自父作用域的子作用域,我们称之为隔离作用域(isolated scope). 指令中的scope一共可以有三个值,下面我们再来温习下: 指令之scope scope: false 默认值,指令不会新建一个作用域,使用父级作用域. scop

剖析AngularJS作用域

一.概要 在AngularJS中,子作用域(child scope)基本上都要继承自父作用域(parent scope). 但,事无绝对,也有特例,那就是指令中scope设置项为对象时,即scope:{…},这将会让指令创建一个并不继承自父作用域的子作用域,我们称之为隔离作用域(isolated scope). 指令中的scope一共可以有三个值,下面我们再来温习下: 指令之scope scope: false 默认值,指令不会新建一个作用域,使用父级作用域. scope: true 指令会创建

AngularJS 中的作用域

问题引入 使用 Angular 进行过一段时间的开发后,基本上都会遇到一个这样的坑: 123456789101112 <div ng-controller="TestCtrl"> <p>{{name}}</p> <div ng-if="show"> <input type="text" ng-model="name"> </div></div>

angular(20)---事件

Angular的作用域在本质上是分层次的:他们可以通过父子关系很自然地来回沟通.但通常,作用域不共享变量的,他们执行的功能往往各不相同,跟在父树上无关. 在这种情况下,我们可以通过在这个链上传递事件的方式在作用域之间通信. 什么是事件? Angular应用也可以相应Angular事件,这使得我们可以在应用中嵌套的各组件之间进行通信,即使这些组件在创建时并未考虑到其他组件. 注:Angular事件系统并不与浏览器的事件系统相通,这意味着,我们只能在作用域上监听Angular事件而不是DOM事件.

《Getting MEAN with Mongo Express Angular and Node》---ch08 Adding Angular components to an Express application(向Express应用添加Angular组件)

This chapter covers(本章概要)■ Getting to know Angular(了解Angrular)■ Adding Angular to an existing page(向动态页面添加Angular)■ Filtering lists of data(过滤列表数据)■ Using an API for reading data(使用API读取数据)■ Some Angular jargon: controllers, scope, filters,directives

angular.js学习笔记--概念总结

好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $rootScope 和 $scope: $rootScope是angular中最接近全局作用域的对象,是所有$scope对象的最上层! $scope对象就是一个普通的js对象,我们可以在其上随意修改和添加属性,并且其在angular中充当数据模型,它是所有属性都可以自动呗视图访问到,但是它并不负责数据的处理