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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
Prototype Number对象 学习
Jul 19 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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
php+oracle 分页类
2006/10/09 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
smarty自定义函数用法示例
2016/05/20 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python3实现绘制二维点图
2019/12/04 Python
python 如何对logging日志封装
2020/12/02 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
捐赠仪式主持词
2014/03/19 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
公司租车协议书
2015/01/29 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python