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}.
 testControl第22中学在$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去取

 

 

            

相关文章