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 相关文章推荐
Javascript解析URL方法详解
Dec 05 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
JavaScript实现答题评分功能页面
Jun 24 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
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
mpvue 单文件页面配置详解
2018/12/02 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
Django中使用Celery的方法步骤
2020/12/07 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
STP的判定过程
2012/10/01 面试题
业务内勤岗位职责
2014/04/30 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
js实现自动锁屏功能
2021/06/02 Javascript