angular中的作用域及继承

在一些使用angular框架的大型项目中,似乎有很多个controller,而每个controller都有自己的$scope.

  1. $rootscope
    $rootScope顶级作用域,也叫根作用域,类似于window,window的属性在任何子作用域都可以访问。$rootScope则是所有controller进行数据沟通的中间域,即在$rootScope中的数据,在每个controller中都能通过$rootScope.xxx获取到。

  2. $scope
    (1)作用
    $scope 就在视图和控制器之间建立了一个桥梁,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图.每个控制器controller对应一个$scope,通过为其属性赋值,可以传递数据给模板渲染.
    (2)生命周期
    创建:在创建控制器或指令时,AngularJS会用$injector创建一个新的作用域,并在这个新建的控制器或指令运行时将作用域传递进去。
    链接:当Angular开始运行时,所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。这些函数被称为$watch函数,Angular通过这些函数获知何时启动事件循环。
    更新:当事件循环运行时,它通常执行在顶层$scope对象上(被称作$rootScope),每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化,$scope对象就会触发指定的回调函数
    销毁:当一个$scope在视图中不再需要时,这个作用域将会清理和销毁自己。尽管永远不会需要清理作用域(因为Angular会为你处理),但是知道是谁创建了这个作用域还是有用的,因为你可以使用这个$scope上叫做$destory()的方法来清理这个作用域。

  3. 原型继承
    scope是AngularJS中的作用域(其实就是存储数据的地方),很类似JavaScript的原型链 。搜索的时候,优先找自己的scope,如果没有找到就沿着作用域链向上搜索,直至到达根作用域rootScope。

<!DOCTYPE html>
                    <html>
                    <head>
                     <title></title>
                    </head>
                    <body ng-app="myApp">
                    <div ng-controller="parentController">
                        {{name}}
                        <div ng-controller="sonController">
                            {{name}}
                        </div>
                    </body>
                    <script type="text/javascript" src="./angular.min.js"></script>
                    <script>
                        var parentController=function($scope){
                            $scope.name="parent";
                        }
                        var sonController=function($scope){
                            console.log($scope.name);//parent
                        }
                        parentController.$injector=["$scope"];
                        sonController.$injector=["$scope"];
                        angular.module("myApp",[])
                        .controller("parentController",parentController)
                        .controller("sonController",sonController)
                    </script>
                    </html>
首先子控制器在自己的作用域内查找name属性,没找到,向父控制器找。
    补充一点,如何在子控制器中修改父控制器中$scope的值,可见如下:

$scope.$parent.name="son";在子控制器中$scope.$parent就表示父控制器中的$scope,然后修改其值即可。
4.$new
$scope.$new(isolated,parent);用于定义scope的child scope
1)参数:isolated,是否是隔离的。如果值是true,那么这个scope不会从父scope继承原型。作用域是独立的,在这里不能看见父scope的属性。如果值为false,则继承自父(可以访问父scope的所有成员),默认为false!

parent  用于指定创建的子scope的父scope,如果没有此参数,则父scope为调用当前$new方法的$scope
    var myController=function($scope){
        $scope.data="hello!"
        var scope1=$scope.$new(false,$scope);
        console.log(scope1.data); //hello!  scope1继承了$scope,所以可以访问到data
        var scope2=$scope.$new(true,$scope);  
        console.log(scope2.data);// undefined  第一个参数为true,表示是隔离的,无法继承,自己又没有,故为undefined
    }
    myController.$injector=["$scope"];
    angular.module("myApp",[])
    .controller("myController",myController)

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...