Angular作用域Scope

最新推荐文章于 2020-03-31 14:03:19 发布

原创最新推荐文章于 2020-03-31 14:03:19 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Angular

Angular 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了AngularJS中作用域的概念，包括基本作用范围的理解及根作用域的应用方式。通过实例展示了如何在一个控制器中操作作用域变量，并利用根作用域实现跨控制器的数据共享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Scope作用范围

了解你当前使用的 scope 是非常重要的。

在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

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

2、根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

<body>

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

<h1>姓氏为 {{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

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

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

<p>注意 $rootScope 在循环对象内外都可以访问。</p>

</body>

链接：http://www.runoob.com/angularjs/angularjs-scopes.html