极客教程什么是AngularJS的范围
在这篇文章中，我们将看到AngularJS中的Scope是什么，以及如何使用Scope，同时通过实例了解其实现。
AngularJS中的Scope是HTML（视图）和JavaScript（控制器）之间的绑定部分，它是一个内置对象。它包含应用数据和对象。它对视图和控制器都是可用的。它是一个具有可用属性和方法的对象。在Angular JS中，有两种类型的作用域。
- $Scope
- $rootScope
如何使用范围？
当我们在AngularJS中制作一个控制器时，我们将传递scope对象作为参数。在AngularJS中，它为应用程序中的每个控制器创建并注入了不同的scope对象。因此，在一个控制器中附加到$scope的数据和方法不能被另一个控制器访问。在嵌套的控制器中，子控制器将获得父控制器的范围对象。因此，子控制器可以访问添加到父控制器的属性，但父控制器不能访问附属于子控制器的属性。
了解范围：如果我们看到一个由AngularJS应用程序组成。
- HTML视图。
- 模型，即当前视图可用的数据。
- 控制器，是制作/改变/删除/控制数据的JavaScript函数。
范围是模型，它是一个具有属性和方法的JavaScript对象，对视图和控制器都可用。
例子1：在这个例子中，我们将看到$scope对象的使用，也将看到数据是如何从控制器传输到视图组件的，视图组件是通过插值渲染的。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="gfg"
ng-controller="myCtrl">
<h1>{{organisation}}</h1>
</div>
<p>
The property "organization" was made in
the controller, and can be referred to
in the view by using the {{ }} brackets.
</p>
<script>
var geeks = angular.module("gfg", []);
geeks.controller("myCtrl", function(scope) {
scope.organisation = "GeeksforGeeks";
});
</script>
</body>
</html>
输出:
由控制器做出的属性可以在视图中被引用。
例子2：从前面的例子中，我们只使用了单个作用域，但对于更大的应用，这可能是HTML DOM中的一个部分，可以访问某些作用域。
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Scope</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="gfg"
ng-controller="control">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var geeks = angular.module("gfg", []);
geeks.controller("control", function(scope) {
scope.names = [
"DSA Learning",
"Algorithm Learning",
"Web Technology",
];
});
</script>
</body>
</html>
输出:
在上面的例子中，只有一个范围，在下面的例子中，你会看到不止一个范围。
根作用域：根作用域是在具有ng-app指令的HTML元素上创建的作用域，包含在所有应用程序中。根作用域在整个应用程序中是可用的。
例3：如果任何变量在当前作用域和根作用域中以相同的名称被声明，那么应用程序将使用当前作用域。在这个例子中，我们将看到名为 “color “的变量是如何被当前作用域使用的。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>
<p>
Note that the color variable in controller does
not overwrite the color value in rootScope.
</p>
<script>
var app = angular.module("myApp", []);
app.run(function(rootScope) {
rootScope.color = "turquoise";
});
app.controller("myCtrl", function(scope) {
scope.color = "salmon";
});
</script>
</body>
</html>
输出:
一个名为 “color “的变量同时存在于控制器的作用域和rootScope中。
$Scope和$rootScope之间的区别：
| $rootScope | $Scope |
|---|---|
| $rootScope是一个网页中创建的所有”$scope “angular对象的父对象。 | $scope是一个子对象，用来绑定网页中的HTML（视图）和Javascript（控制器）。 |
| 它是用ng-app指令创建的。 | 它是用ng-controller指令创建的。 |
| 它对所有的控制器都可用，也就是说，用”$rootscope “分配的属性可以在任何地方使用。 | 它只对创建它的控制器可用，也就是说，用”$scope “分配的属性不能在定义它的控制器之外使用。 |
| 在这种情况下，每个应用程序至少有一个”$rootscope”，其生命周期与应用程序相同。 | 在这种情况下，每个控制器都可以有自己的范围，不与他人共享。 |