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">
            {{ Count }}
            <button ng-click="addParent()">ParentClick</button>
            <div ng-controller="ChildController">
                 {{Count}} 
                <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的价值,
对于A类情况以尚未点击ChildClick的时候,ChildController还没有设置Count的价,那么相应的{Count}只出先失取ParentController里面的$scope.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">
            {{ Count }}
            <button ng-click="addParent()">ParentClick</button>          
        </div>
        <div ng-controller="BrotherTwo">
                 {{ Count }} 
                <button ng-click="addChild()">ChildClick</button>
        </div>
    </div>
</head>
<body>
</body>
</html>

        三. 本篇总结       

A.$rootScope == 全局变量
B.绑定的变量默认先从当前Controller的$scope去取

 

 

            

相关文章