AngularJS入门教程之Scope(作用域)
AngularJS Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
如何使用 Scope
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
AngularJS 实例
控制器中的属性对应了视图上的属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{carname}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>
</body>
</html
运行结果：
Volvo
控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
Scope 概述
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
AngularJS 实例
如果你修改了视图，模型和控制器也会相应更新：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
我的名字是 {{name}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
<p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>
</body>
</html>
运行结果：
我的名字是 John Doe
当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。
Scope 作用范围
了解你当前使用的 scope 是非常重要的。
在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。
AngularJS 实例
当我们使用 ng-repeat 指令时，每个重复项都访问了当前的重复对象:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<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>
</html>
运行结果：
- Emil
- Tobias
- Linus
每个 <li> 元素可以访问当前的重复对象，这里对应的是一个字符串， 并使用变量 x 表示。
根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
AngularJS 实例
创建控制器时，将 $rootScope 作为参数传递，可在应用中使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
姓氏为 {{lastname}} 家族成员:
<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>
</html>
运行结果：
姓氏为 Refsnes 家族成员:
- Emil Refsnes
- Tobias Refsnes
- Linus Refsnes
注意 $rootScope 在循环对象内外都可以访问。
相关文章
angularjs使用div模拟textarea文本框的方法
今天小编就为大家分享一篇angularjs使用div模拟textarea文本框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了浅析AngularJS中的生命周期和延迟处理,是AngularJS中较为核心的深层次内容,需要的朋友可以参考下2015-06-06
Angularjs根据json文件动态生成路由状态的实现方法
最近做项目遇到这样一个新需求，就是需要根据json文件动态生成路由状态，通过查阅相关资料实现了此功能，下面小编把问题总结分享到脚本之家平台供大家参考2017-04-04
这篇文章主要介绍了Angularjs的键盘事件的绑定的相关资料,这里提供了两种方法，1.ng内置指令，2.自定义指令，并进行比较，需要的朋友可以参考下2017-07-07
详解angularJs模块ui-router之状态嵌套和视图嵌套
这篇文章主要介绍了详解angularJs模块ui-router之状态嵌套和视图嵌套，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
最近在做AngularJS 项目，这是写的一个60秒倒计时功能，下面小编给大家介绍AngularJS 验证码60秒倒计时功能的实现，需要的朋友参考下吧2017-06-06
下面小编就为大家分享一篇AngularJs点击状态值改变背景色的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了详解Ubuntu安装angular-cli遇到的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇angularjs $http调用接口的方式详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
设计一个组件时，组件应该是内聚的，应该不依赖外部已经存在的组件，要实现这种松耦合的组件要使用中间人模式。2021-05-05
最新评论