AngularJS入门教程之Scope(作用域)  更新时间:2016年07月27日 12:06:02   投稿:lqh   本文主要介绍AngularJS Scope(作用域),这里对Score知识做了详细介绍,并提供实例代码,有需要的小伙伴可以参考下 AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: AngularJS 实例 控制器中的属性对应了视图上的属性: {{carname}} 控制器中创建一个属性名 “carname”,对应了视图中使用 {{ }} 中的名称。 </html 运行结果: Volvo 控制器中创建一个属性名 "carname",对应了视图中使用 {{ }} 中的名称。 当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。 视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}。 Scope 概述 AngularJS 应用组成如下: View(视图), 即 HTML。 Model(模型), 当前视图中可用的数据。 Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。 scope 是模型。 scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。 AngularJS 实例 如果你修改了视图,模型和控制器也会相应更新: 我的名字是 {{name}} 当你修改输入框中的值时,会影响到模型(model),当然也会影响到控制器对应的属性值。 运行结果: 我的名字是 John Doe 当你修改输入框中的值时,会影响到模型(model),当然也会影响到控制器对应的属性值。 Scope 作用范围 了解你当前使用的 scope 是非常重要的。 在以上两个实例中,只有一个作用域 scope,所以处理起来比较简单,但在大型项目中, HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。 AngularJS 实例 当我们使用 ng-repeat 指令时,每个重复项都访问了当前的重复对象: {{x}} 运行结果: Emil Tobias Linus 每个 元素可以访问当前的重复对象,这里对应的是一个字符串, 并使用变量 x 表示。 根作用域 所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。 $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。 AngularJS 实例 创建控制器时,将 $rootScope 作为参数传递,可在应用中使用: 姓氏为 {{lastname}} 家族成员: {{x}} {{lastname}} 注意 $rootScope 在循环对象内外都可以访问。 运行结果: 姓氏为 Refsnes 家族成员: Emil Refsnes Tobias Refsnes Linus Refsnes 注意 $rootScope 在循环对象内外都可以访问。 您可能感兴趣的文章: Angularjs全局变量被作用域监听的正确姿势 详细谈谈AngularJS的子级作用域问题 关于angularJs指令的Scope(作用域)介绍 浅谈angularJS 作用域 详解JavaScript的AngularJS框架中的作用域与数据绑定 详解AngularJS中的作用域 AngularJS实现单独作用域内的数据操作 AngularJS Controller作用域 详解angularjs中的隔离作用域理解以及绑定策略 详谈AngularJs 控制器、数据绑定、作用域 AngularJS中的作用域实例分析 AngularJS Scope 相关文章 将Angular单项目升级为多项目的全过程 有时候在开发的过程中发现一个Angular项目不太够用,两个独立的项目又不太好复用,这时便需要将原来的Angular项目简单做个升级,这篇文章主要给大家介绍了关于将Angular单项目升级为多项目的相关资料,需要的朋友可以参考下 2021-11-11 AngularJS基础知识笔记之过滤器 在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能 2015-05-05 如何解决手机浏览器页面点击不跳转浏览器双击放大网页 这篇文章主要介绍了如何解决手机浏览器页面点击不跳转浏览器双击放大网页的相关资料,需要的朋友可以参考下 2016-07-07 AngularJS整合Springmvc、Spring、Mybatis搭建开发环境 这篇文章主要介绍了AngularJS整合Springmvc、Spring、Mybatis搭建开发环境的相关资料,为学习使用AngularJS做好基础准备,感兴趣的小伙伴们可以参考一下 2016-02-02 Angular4.0动画操作实例详解 这篇文章主要介绍了Angular4.0动画操作,结合实例形式详细分析了Angular4.0动画的原理、定义及使用等相关操作技巧,需要的朋友可以参考下 2019-05-05 利用Ionic2 + angular4实现一个地区选择组件 ionic是一个移动端开发框架,使用hybird技术,只要使用前端开发技术就可以开发出电脑端,安卓端和ios端的站点程序。下面这篇文章主要给大家介绍了关于利用Ionic2 + angular4实现一个地区选择组件的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-07-07 Angular中自定义Debounce Click指令防止重复点击 本篇文章主要介绍了Angular中自定义Debounce Click指令详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-07-07 ng-repeat指令在迭代对象时的去重方法 今天小编就为大家分享一篇ng-repeat指令在迭代对象时的去重方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 angularJS深拷贝详解 本篇文章主要介绍了angularJS深拷贝,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-03-03 Angular5集成eventbus的示例代码 这篇文章主要介绍了Angular5集成eventbus的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 最新评论

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全局变量被作用域监听的正确姿势
  • 详细谈谈AngularJS的子级作用域问题
  • 关于angularJs指令的Scope(作用域)介绍
  • 浅谈angularJS 作用域
  • 详解JavaScript的AngularJS框架中的作用域与数据绑定
  • 详解AngularJS中的作用域
  • AngularJS实现单独作用域内的数据操作
  • AngularJS Controller作用域
  • 详解angularjs中的隔离作用域理解以及绑定策略
  • 详谈AngularJs 控制器、数据绑定、作用域
  • AngularJS中的作用域实例分析
张贴在3