4.AngularJS的作用域$scope
发布在Angular学习之路2015年6月21日view:3605前端开发XmgvzgrkAngularjs
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。
<script>
function a($scope){
    $scope.name="hello";
    var age = '18';
}
</scrupt>
<body>
   <div ng-controller="a">
         <p>{{name}}</p>
        <p>{{age}}</p>
   </div>
</body>

通过以上代码,只有name可以显示,age是不显示的,所以我们知道,只有把数据挂在$scope上,视图才能找得到。

<script>
function a($scope){
    $scope.name="hello";
    $scope.age = '18';
}
</scrupt>
<body>
   <div ng-controller="a">
         <p>{{name}}</p>
   </div>
   <p>{{age}}</p>
</body>

以上同样不显示age出来,因为$scope作用域是有一个范围的,在视图里定义了ng-controller的控制器为a,则是告诉控制器,当前我这个div的范围就是你控制器a的范围,超过这两个范围的,都不会起作用的,因为这是一个局部的作用域。

    <script>
    function a($scope){
        $scope.age="10";
    }
    </script>
  <script>
    function b($scope){
        $scope.age = '18';
    }
    </script>
    <body>
       <div ng-controller="a">
             <p>{{age}}</p>
       </div>
       <div ng-controller="b">
             <p>{{age}}</p>
       </div>
    </body>

通过以上代码可以知道,对应的模板上定义自己当前范围内所对应的控制器,在对应的控制器上进行相应的逻辑处理或者作用域下相应的数据挂在,都可以在相应的模板上展示出来。

正所谓有局部作用域,肯定也是有全局作用域,通过在控制器里引入$scope一样,注入$rootScope,只要把对应的数据挂在$rootScope的话,除了当前定义这个控制器的模板的范围内能够访问到这个$rootScope外,其他的模板,即使控制器里没有定义相关的数据,还是一样能够访问到。代码如下可看:

    <script>
    function a($scope,$rootScope){
       $rootScope .name = 'feng';
        $scope.age="10";
    }
    </script>
  <script>
    function b($scope){
        $scope.age = '18';
    }
    </script>
    <body>
       <div ng-controller="a">
             <p>{{age}}</p>
       </div>
       <div ng-controller="b">
             <p>{{age}}</p>
             <p>{{name}}</p>
       </div>
    </body>

b的控制器里面的作用域$scope并没有挂载name数据,但它却能显示name数据,因为全局作用域$rootScope。

问题又来了,如果又定义全局作用域,又有定义局部作用域,局部模板的是应该用局部的数据还是全局的数据的呢?看代码:

    <script>
    function a($scope,$rootScope){
       $rootScope .name = 'feng';
        $scope.age="10";
    }
    </script>
  <script>
    function b($scope){
        $scope.name = 'zhou';
        $scope.age = '18';
    }
    </script>
    <body>
       <div ng-controller="a">
             <p>{{age}}</p>
       </div>
       <div ng-controller="b">
             <p>{{age}}</p>
             <p>{{name}}</p>
       </div>
    </body>

通过上面例子,我们可以看到,在控制器a里面定义了全局数据name,在b控制器里面定义了局部数据name,这个时候是显示局部的name,看到这里,大家似乎有种熟悉的感觉,有种JS的作用域查找变量或者是原型链上查找对应的属性的感觉,都是一个原理,从自身查找出发,一直往外走,就近查找。以上得出的结论,特别在以后出现模板的嵌套,也就是控制器的嵌套的时候,知道这个原理很重要。

注意,在前面已经讲过依赖注入,在控制器里注入$scope或者$rootScope,任何一个字母都不能错,在JS的传参我们知道,位置决定了这个参数代表着什么,但是在AngularJS不一样,在传参的时候,特别是AngularJS定义好的东西传入的时候,AngularJS已经帮我们给注入进去,所以在控制器里传入参数的时候,不需要考虑位置的问题,但必须确保任何一个字母都不能错。

评论
发表评论
11个月前
添加了一枚【评注】:script
11个月前
添加了一枚【评注】:script
11个月前
添加了一枚【评注】:script
11个月前
添加了一枚【评注】:script
11个月前
添加了一枚【评注】:script
1年前
添加了一枚【评注】:script
2年前

学习了!

WRITTEN BY
PUBLISHED IN
Angular学习之路

前段时间用了ionic的框架为整个系统运维部门开发了一个webapp,集成了angular框架的,然后这两个月以来一直在开发新项目,也用上了anguarl,自己的博客也在重建当中,把自己之前的记录或者后面遇到的知识点(有基础的,有深入的,有挖坑的,有填坑的,记录方方面面,持续更新),都来分享下,前端需要分享,分享使我们强大!

我的收藏