AngularJS 作用域

作用域（Scope）是 HTML（视图）和 JavaScript（控制器）之间的绑定部分。

作用域是一个具有可用属性和方法的对象。

作用域可用于视图和控制器。

如何使用作用域?

在 AngularJS 中创建控制器时，将 $scope 对象作为参数传递:

实例

在控制器中创建的属性，可以在视图中引用:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h2>{{carname}}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>
<p>属性 "carname" 是在控制器中创建的，可以在视图中使用 {{ }} 括号进行引用。</p>
</body>
</html>

运行一下

向控制器中的 $scope 对象添加属性时，视图（HTML）可以访问这些属性。

在视图中，不使用前缀 $scope，只引用属性名，比如 {{carname}}。

理解作用域

如果我们认为 AngularJS 包括以下（MVC）:

视图，即 HTML。
模型，它是当前视图可用的数据。
控制器，这是一个 JavaScript 函数，用于生成/更改/删除/控制数据。

那么作用域 scope 就相当于模型 model。

作用域是一个JavaScript对象，具有属性和方法，可用于视图和控制器。

实例

如果在视图中进行更改，模型和控制器将更新:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h2>My name is {{name}}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>
<p>在输入字段中更改名称时，这些更改将影响模型，还将影响控制器中的 name 属性。</p>
</body>
</html>

运行一下

了解你的作用域

It is important to know which scope you are dealing with, at any time.

In the two examples above there is only one scope, so knowing your scope is not an issue, but for larger applications there can be sections in the HTML DOM which can only access certain scopes.

随时了解你要处理的作用域是很重要的。

在上面的两个示例中，只有一个作用域，因此了解您的作用域不是问题，但是对于更大的应用程序，HTMLDOM 中可能有只能访问特定作用域的部分。

实例

在处理 ng-repeat 指令时，每个 repeat 都可以访问当前 repeat 对象:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
  <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
<p>变量 "x" 对于每个 repeat 都有不同的值，证明每个 repeat 都有自己的作用域。</p>
</body>
</html>

运行一下

每个 <li> 元素都可以访问当前的 repeat 对象，在本例中是一个字符串，使用 x 来引用它。

根作用域

所有应用程序都有一个 $rootScope，它是在包含 ng-app 指令的 HTML 元素上创建的作用域。

rootScope 在整个应用程序中都可用。

如果变量在当前作用域和根作用域中具有相同的名称，则应用程序将使用当前作用域中的名称。

实例

A variable named "color" exists in both the controller’s scope and in the rootScope:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="myApp">
<p>rootScope 最喜欢的颜色:</p>
<h2>{{color}}</h2>
<div ng-controller="myCtrl">
<p>控制器最喜欢颜色的作用域:</p>
<h2>{{color}}</h2>
</div>
<p>rootScope 最喜欢的颜色依然是:</p>
<h2>{{color}}</h2>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
    $rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
    $scope.color = "red";
});
</script>
<p>请注意，控制器的颜色变量不会覆盖 rootScope 的颜色值。</p>
</body>
</html>

运行一下

AngularJS 作用域

如何使用作用域?

实例

理解作用域

实例

了解你的作用域

实例

根作用域

实例

分类导航