AngularJS $ scope层次结构
时间：2020-01-09 10:34:01 来源:igfitidea点击:
AngularJS中的视图使用的$ scope对象被组织成一个层次结构。有一个根作用域，并且该根作用域有一个或者多个子作用域。每个视图都有自己的$ scope(是根作用域的子级)，因此，无论一个视图控制器在其$ scope`变量上设置了什么变量，其他控制器都看不到这些变量。
看一下这个AngularJS代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="myController1">
{{data.theVar}}
</div>
<div ng-controller="myController2">
{{data.theVar}}
</div>
<script>
var module = angular.module("myapp", []);
var myController1 = module.controller("myController1", function($scope) {
$scope.data = { theVar : "Value One"};
});
var myController2 = module.controller("myController2", function($scope) {
$scope.data = { theVar : "Value Two"};
});
</script>
</body>
</html>
本示例包含两个视图，每个视图都有自己的控制器功能。每个控制器将变量" data.theVar"设置为不同的值。
执行此示例时，$ scope层次结构将如下所示：
- 根$ scope $ scope for myController 1
- $ scope为myController 2
如我们所见，两个控制器使用的$ scope对象不是同一个$ scope对象。这就是为什么上面的示例将在两个视图内为数据绑定" {{data.theVar}}"写出两个不同的值的原因。视图的两个控制器函数在各自的$ scope对象中为data.theVar变量设置了不同的值。
