作用域和控制器

AngularJS笔记---作用域和控制器

 什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头。可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设置不同的ng-Controller来让$scope处于不同的作用域下面.

         一.$rootScope

            1.1 rootScope,module.rootScpoe不依赖于任何一个controller,  app.run是module被加载时候执行的代码. 可以理解成Silverlight MVVM里面的oninit方法. 

复制代码
<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module('myapp',[]);

    app.run(function($rootScope){

        $rootScope.message="hello frank!";

    });

</script>

<head>

    <div ng-app="myapp">

        <h1>{{ message }}</h1>

    </div>

</head>

<body>

</body>

</html>
复制代码

            1.2 AngularJS会优先获取Controller中$scope添加的值.

            代码如下: 分别有三个{message}.  testControl2中在$scope中重新赋予了message值.

复制代码
<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module('myapp',[]);

    app.run(function($rootScope){

        $rootScope.message="hello frank!";

    });



    app.controller('testControl1',function(){

        

    });



    app.controller('testControl2',function($scope){

         $scope.message = "hello loch!";

    });

    

</script>

<head>

    <div ng-app="myapp">

        {{ message }}

        <div ng-controller="testControl1">

            {{ message }}

        </div>

        <div ng-controller="testControl2">

            {{ message }}

        </div>

    </div>

</head>

<body>

</body>

</html>
复制代码

            运行结果:  testControl2下的message被修改了.        

hello frank! 

hello frank! 

hello loch! 

          二. 控制器(ng-Controller)

            ng-Controller氛围两种情况一种是包含,另一种是独立. 我们暂且叫做 父子关系和兄弟关系吧.

            2.1 父子关系

            2.1.1 代码如下:ChildController 包含在了ParentController里面, 两个button都对Count字段进行赋值。

复制代码
<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module('myapp',[]);



    app.controller('ParentController',function($scope){

        $scope.Count = 1;

        $scope.addParent = function(){

            $scope.Count+=1;

        }

    });



    app.controller('ChildController',function($scope){
// $scope.Count = 1; $scope.addChild = function(){ $scope.Count+=1; } }); </script> <head> <div ng-app="myapp"> <div ng-controller="ParentController"> <span>{{ Count }}</span> <button ng-click="addParent()">ParentClick</button> <div ng-controller="ChildController"> <span> {{Count}} </span> <button ng-click="addChild()">ChildClick</button> </div> </div> </div> </head> <body> </body> </html>
复制代码

            2.1.2 运行结果:(在上面demo中,有一串被注释掉的代码,)

            A 代码被注解: 当一开始点击ParentClick的时候两个Count一起增加, 然后点击ChildClick的时候只有ChildDiv的Count在增加,然后再回去点击ParentClick的时候,就只有ParentCount在自增

            B.代码没被注解: 两者之间的自增都是独立分开的,互补关联.

            2.1.3 总结:

             因为在AngularJS中会默认先找当前Controller下的值,找不到再去找父类Controller值,如果还找不到就去找rootScope,AChildClick,ChildControllerCountCountParentControllerscope.count的值. 当点击了ChildClick后,ChildController中的$scope.count被创建,然后两个Controller就此开始独立.

            2.2 兄弟关系.   

            运行结果: 两个Controller下的Count独立,自增互不影响.    

复制代码
<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module('myapp',[]);



    app.controller('BrotherOne',function($scope){

        $scope.Count = 1;

        $scope.addParent = function(){

            $scope.Count+=1;

        }

    });



    app.controller('BrotherTwo',function($scope){

         $scope.Count = 1;

         $scope.addChild = function(){

             $scope.Count+=1;

         }

    });

    

</script>

<head>

    <div ng-app="myapp">

        <div ng-controller="BrotherOne">

            <span>{{ Count }}</span>

            <button ng-click="addParent()">ParentClick</button>          

        </div>

        <div ng-controller="BrotherTwo">

                <span> {{ Count }} </span>

                <button ng-click="addChild()">ChildClick</button>

        </div>

    </div>

</head>

<body>

</body>

</html>
复制代码

        三. 本篇总结       

A.$rootScope == 全局变量

B.绑定的变量默认先从当前Controller的$scope去取

 

 

            

 

 

 

 

你可能感兴趣的:(AngularJS学习笔记)