AngularJS 范围

2024年10月7日 | 2 分钟阅读

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

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

视图和控制器都可以使用作用域。

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

示例

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

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.carname = "Volvo";
});
</script>

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

在视图中，您不使用前缀 $scope，而是引用属性名称，例如 {{carname}}。

理解作用域

如果我们考虑包含一个 AngularJS 应用程序

控制器，它是一个 JavaScript 函数，用于创建/更改/删除/控制数据。

然后是作用域模型。

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

示例

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

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">

<h1>My name is {{name}}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});

</script>

上面的两个示例只有一个作用域，因此了解你的作用域不是问题，但对于更大的应用程序，HTML DOM 可能包含只能访问某些作用域的部分。

示例

当使用 ng-repeat 指令时，每次迭代都可以访问当前迭代对象

<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>

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

根作用域

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

根作用域

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

RootScope 在整个应用程序中可用。

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

示例

名为“color”的变量同时存在于控制器的作用域和 rootScope 中

<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>

<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
  $rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
  $scope.color = "red";
});

下一主题#

← 上一个下一个 →

AngularJS 范围

示例

理解作用域

根作用域

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS 范围

示例

理解作用域

根作用域

相关帖子

Angular 模板

Angular 常见路由任务

Angular ng-module

Angular 分页器

Angular 的五个最佳单元测试工具

Angular 中的 Observables

Ng-container Angular

Angular 属性绑定

Angular Flex 布局

Angular 路由

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器