Angular.js学习笔记（五）

来源：互联网发布：java future get 阻塞编辑：程序博客网时间：2024/05/19 03:29

按照约定，我们这篇文章来具体掰扯掰扯angular的作用域scope的问题。AngularJS应用最重要的部分之一就是作用域。作用域不仅提供在模型中表示的数据，还将把AngularJS应用中的所有其他组件绑定在一起，如模块、控制器、服务和模板。作用域提供绑定机制，通过这种机制，当模型数据发生变化时，DOM元素和其他代码也将更新。这就是我们曾经提到的AngularJS的一个很显著的特点，双向绑定。这与之前我们接触到的各种前端框架不同，在思维上，我们可能要一段时间来适应不去手动的操作DOM元素的变化。1.根作用域其实作用域理解起来并不困难。当一个应用启动的时候，Angular会自动的创建一个根作用域，这个作用域是处在整个作用域链条的最顶端，我们可以理解为这里定义的变量和方法都是全局的，可以被子作用域继承和访问。根作用域用rootScope来表示，一般应该放在模块的run()中初始化。
Demo:

angular.module('myApp', []).run(function ($rootScope){    $rootScope.rootValue = 5;})

2.作用域和控制器
控制器是通过增强作用域来提供业务逻辑的代码。这是我们在作用域这个角度为它下的一个定义。注册的控制器在ng-controller指令连接到AngularJS模板时被实例化的。每个控制器都会有一个自己的单独的子作用域，至于在自定义指令中的$scope，是与控制器作用域同级的，和控制器作用域并没有任何的隶属关系。

3.作用域和模板
模板是用来为Angular提供视图的。在模板中定义AngularJS指令时，可以使用作用域属性和函数。在模板的表达式中也可以引用作用域中的属性。

4.作用域生命周期
创建->监视器注册->模型变化->变化观察->作用域销毁

创建阶段发生在作用域初始化时。启动应用时将创建一个根作用域，当遇到ng-controller或者ng-repeat指令时，控制器或者指令链接到模板时，将会创建子作用域。在创建阶段，将会创建一个digest循环，用于与浏览器时间循环交互。该digest循环负责使用模型的变化更新DOM元素，并执行所有已经注册的监视器函数。如果需要手动的执行digest循环，可以通过执行$digest()方法实现. 例如，下面的代码将执行所有的异步改动，然后执行作用域中的监视函数。

$scope.$digest()

我们可以用$watch()方法在作用域上注册自己的监视函数。该方法接受两个参数，一个是作用域属性的名字，一个是回调函数。

$scope.$watch('name', function(newValue, oldValue){});

3.作用域层次问题
这里有一个来自《Angular Js开发秘籍》的Demo,简单明了。

scopeDemo.js

angular.module('myApp',[]).controller('LevelA', function($scope){    $scope.title = "LevelA";    $scope.valueA = 1;    $scope.inc = function(){        $scope.valueA++;    };}).controller('LevelB', function($scope){    $scope.title = "LevelB";    $scope.valueB = 1;    $scope.inc = function(){        $scope.valueB++;    };}).controller('LevelC', function($scope){    $scope.title = "LevelC";    $scope.valueC = 1;    $scope.inc = function(){        $scope.valueC++;    };});

<!doctype html><html ng-app="myApp"><head><title>AngularJS Scope</title></head><body><div ng-controller="LevelA"><h3>{{h3}}</h3>ValueA = {{valueA}}<input type="button" ng-click="inc()" value="+" /><div ng-controller="levelB"><hr><h3>{{title}}</h3>ValueA = {{valueA}}<br>ValueB = {{valueB}}<br><input type="button" ng-click="inc()" value="+" /><div ng-controller="LevelC"><hr><h3>{{title}}</h3>ValueA = {{valueA}}<br>ValueB = {{valueB}}<br>ValueC = {{valueC}}<input type="button" ng-click="inc()" value="+" /></div></div></div><script src="angular.js"></script><script src="scopeDemo.js"></script></body></html>

这里写图片描述

子作用域可以访问父作用域的属性值，父作用域的属性值发生变化时，子作用域中的属性值也会跟着发生变化，而子作用域中的属性值保持独立性。

按照惯例，我们把一些资料列在这里，供大家学习。
http://www.angularjs.cn/A09C
https://github.com/angular/angular.js/wiki/Understanding-Scopes
http://www.cnblogs.com/lcllao/archive/2012/09/23/2698651.html

0 0