首页 > 代码库 > Angular作用域的层级概念(scope)

Angular作用域的层级概念(scope)

2024-08-27 20:31:32   221人阅读

首先引入 angular 的根作用域：$rootScope

ng-app:定义了angualr的作用域

ng-controller:定义了控制器

$scope定义了视图与控制器之间的纽带，而scope本身是垂直继承的，当子作用域没有定义，便会找父作用域，逐层往上找直到根作用域 $rootScope.

 

没有定义控制器的元素对应的即是根作用域，如下（<div>{{msg}}</div>）

看下面代码，当我们点击parent控制器时，发现其子控制器内容会跟着变化，而父控制器以及根作用域绑定的元素内容没有变化（msg默认在各作用域都没有定义，因此继承根作用域的msg="Hello KiTy"）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7     <title>test</title>
 8 </head>
 9 <body ng-app = "myApp">
10     <div>{{msg}}</div>
11     <div ng-controller="parent" ng-click="change()">{{msg}}
12         <div ng-controller="child">{{msg}}</div>
13         <div ng-controller="child1" ng-click="change1()">{{msg}}</div>
14         <div ng-controller="child2">{{msg}}</div>
15     </div>
16 <script src="http://www.mamicode.com/angular.js"></script>
17 <script>
18 
19     var app = angular.module(‘myApp‘, []);
20     app.run(function($rootScope){　　　　　　　　　　//run方法根作用域$rootScope的方法,因其没有控制器,不能用controller方法
21         var msg = "Hello KiTy"
22         $rootScope.msg = msg;
23     })
24     app.controller("parent", function($scope){
25         $scope.change = function(){
26              $scope.msg = "lol";
27         }
28     })
29     app.controller("child", function($scope){
30             
31     })
32     app.controller("child1", function($scope){
33         
34     })
35     app.controller("child2", function($scope){
36             
37     })
38 </script>
39 </body>
40 </html>

由上不难发现scope是垂直继承，且是单向由上当下的，即父作用域不会继承子作用域数据绑定的值

若想通过子作用域传递其数据到父作用域可以在子控制器函数中加以下代码：

方法一：

1 app.controller("parent", function($scope，$rootScope){
2         console.log($scope)
3         $scope.change = function(){
4             $rootScope.msg = "lol";
5         }
6     })

方法二：

1 app.controller("parent", function($scope){
2         console.log($scope)
3         $scope.change = function(){
4             $scope.$parent.msg = "lol";
5         }
6     })

那么找个$parent怎么来的？答案：console.log($scope)；控制台输出$scope后找到的，意为其父作用域

当然了我们还发现了兄弟作用域$$prevSibling、$$nextSibling,可以通过这两项来改变兄弟作用域内数据，意为前一个兄弟、后一个兄弟

代码：

1 app.controller("child1", function($scope){
2         console.log($scope);
3         $scope.change1 = function(){
4              $scope.$$prevSibling.msg = "lol";
5　　　　　　　　　$scope.$$nextSibling.msg = "lol";
6         }
7     })

 

通过以上分析我们发现作用域层级关系就像DOM树型机构，一 一对应，有根作用域 $rootScope,子作用域 $scope ,每一个子作用域有其兄弟作用域

可通过 $parent; $$prevsibling; $$nextSibling 向其父作用域以及兄弟作用域传递数据。（若子作用域默认有数据绑定，则不会受其他作用域影响）

 

Angular作用域的层级概念(scope)


联系
我们