AngularJS入门教程之Scope(作用域)


Posted in Javascript onJuly 27, 2016

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 在循环对象内外都可以访问。

Javascript 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
vue下载二进制流图片操作
Oct 26 Javascript
AngularJS入门之动画
Jul 27 #Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 #Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 #Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 #Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 #Javascript
详解Angular开发中的登陆与身份验证
Jul 27 #Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 #Javascript
You might like
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
心扬JS分页函数代码
2010/09/10 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python中操作符重载用法分析
2016/04/29 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
python实现月食效果实例代码
2019/06/18 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
django 读取图片到页面实例
2020/03/27 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
static关键字的用法
2013/10/07 面试题
.net笔试题
2014/03/03 面试题
自考生自我鉴定范文
2013/10/01 职场文书
夜大毕业自我鉴定
2013/10/11 职场文书
电气工程师岗位职责
2014/01/01 职场文书
工商管理专业自荐信
2014/06/03 职场文书
国企干部对照检查材料
2014/08/22 职场文书
初中作文评语集锦
2014/12/25 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
vue 自定义组件添加原生事件
2022/04/21 Vue.js