第4章 作用域

视图和$scope的世界

　　AngularJS启动后并生成视图，会将ng-app同$rootScope进行绑定。$rootScope是所有$scope对象的顶层。相当于某一个ng-app的全局作用域。$scope对象只充当数据模型，不作处理和操作数据。

　　以下为$rootScope的例子：

　　

<!doctype html>
<html>

    <head>
        <script src="angularJs/1.2.13/angular.js"></script>
    </head>

    <body ng-app="myApp">
        <div>
            hello {{name}}
        </div>

    </body>
    <script>
        var app = angular.module('myApp', []).run(function($rootScope){
            $rootScope.name="world";
        });
    </script>
</html>

 

　　上面的的例子在$rootScope中设置了一个name变量，并引用了它。为了避免污染全局命名空间，可以用控制器显式的创建一个隔离的$scope对象，再将变量设置到这个子变量上。使用ng-controller指令可以将一个控制器对象附加到DOM元素上。如下：

　　

<!doctype html>
<html>

    <head>
        <script src="angularJs/1.2.13/angular.js"></script>
    </head>

    <body ng-app="myApp">
        <div ng-controller="MyController">
            hello {{name}}
        </div>

    </body>
    <script>
        var app = angular.module('myApp', []);
        app.controller("MyController",function($scope){
            $scope.name="Ari";
        })
    </script>
</html>

$scope的生命周期

　 1.创建

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

　  2.链接

　　 当Angular开始运行时，所有的$scope对象都会附加到视图中。

　  3.更新

　　 当事件循环运行时，通常执行顶层$scope对象，每个子作用域执行自己的脏值检测。检测到变换，就会触发指定的回调函数。

　　4.销毁

指令和作用域

　　指令通常不会创建自己的作用域，但ng-controller和ng-repeat指令会创建自己的作用域。

 

posted @ 2016-06-26 16:55  且听风吟-wuchao  阅读(181)  评论(0)  编辑  收藏  举报