ylbtech-AngularJS-Runoob:Scope(作用域)
1.返回顶部
1、

AngularJS Scope(作用域)


Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带

Scope 是一个对象,有可用的方法和属性

Scope 可应用在视图和控制器上


如何使用 Scope

当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:

AngularJS 实例

控制器中的属性对应了视图上的属性:

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>

尝试一下 »

当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。

视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}


Scope 概述

AngularJS 应用组成如下:

  • View(视图), 即 HTML
  • Model(模型), 当前视图中可用的数据
  • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性

scope 是模型。

scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

AngularJS 实例

如果你修改了视图,模型和控制器也会相应更新:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{greeting}}</h1>
<button ng-click='sayHello()'>点我</button>
</div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Runoob";
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.name + '!';
};
});
</script>

尝试一下 »


Scope 作用范围

了解你当前使用的 scope 是非常重要的。

在以上两个实例中,只有一个作用域 scope,所以处理起来比较简单,但在大型项目中, HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。

AngularJS 实例

当我们使用 ng-repeat 指令时,每个重复项都访问了当前的重复对象:

<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>

尝试一下 »

每个 <li> 元素可以访问当前的重复对象,这里对应的是一个字符串, 并使用变量 x 表示。


根作用域

所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

AngularJS 实例

创建控制器时,将 $rootScope 作为参数传递,可在应用中使用:

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}} 家族成员:</h1>

<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>

尝试一下 »

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

AngularJS:Scope(作用域)的更多相关文章

  1. AngularJS Scope(作用域)

    1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...

  2. AngularJS学习之旅—AngularJS Scope作用域(五)

    1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...

  3. AngularJS–Scope(作用域)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Scope Scope 是一个应用程序的模块的对象.它是表达式的执行上下文.它充斥在DO ...

  4. AngularJs之Scope作用域

    前言: 上篇博文AngularJs之directive中说了Scope作用域是个大坑,所以拿出来作为重点总结! 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执 ...

  5. 理解AngularJS的作用域Scope

    AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...

  6. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  7. AngularJs(五)从Controller控制器谈谈$scope作用域

    大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controll ...

  8. 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备!

    作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...

  9. Angular JS 学习之 Scope作用域

    1.Scope作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带: Scope是一个对象,有可用的方法和属性: Scope可应用在视图和控制器上: 2.当你在AngularJS中 ...

  10. AngularJS $scope 继承性 作用 生命周期

    一.基本概念 作用域是一个指向应用模型的对象,相当于MVVM中的ViewModel,能绑定数据(属性)和行为(方法),能监控表达式和传递事件,是实现双向绑定的基础,是应用在 HTML (视图) 和 J ...

随机推荐

  1. java reflect反射---Java高级开发必须懂的

    理解反射对学习Java框架有很大的帮助,如Spring框架的核心就是使用Java反射实现的,而且对做一些Java底层的操作会很有帮助.  一.Class类的使用         1.万事万物皆对象,( ...

  2. 最详细的虚拟机安装centos7教程

    参考网站:https://jingyan.baidu.com/article/b7001fe1d1d8380e7382dd72.html 安装vmware10,vmware是收费的,作为学习,我介意还 ...

  3. 【Java】Serializable 接口

     本文为大便一箩筐的原创内容,转载请注明出处,谢谢:http://www.cnblogs.com/dbylk/p/4356840.html 参考资料: http://xiebh.iteye.com/b ...

  4. 条款20:在传递对象的时候尽量用reference-to-constent来代替,pass-by-value

    注意一下,c++的底层编译器而言,引用类型往往都是由指针来实现出来的,所以pass-by-reference实际意义上往往是传递了一个指针,这对于c++的内置类型来说往往传递一个reference更加 ...

  5. Android界面View及ViewGroup学习 《转载》

    View及ViewGroup类关系 Android View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的. View ...

  6. 网络之Call Phone、Web、SMS、Email

    1. 准备工作:导入信息UI库 #import <MessageUI/MessageUI.h>2. Call Phone 方式一: 拼接字符串 注意开头是tel: 这种方式打电话回不到原来 ...

  7. Tinymce group plugin

    本文介绍一个tinymce插件,用来组合显示下拉的按钮.基于4.x,不兼容3.x. 以前 配置toolbar功能按钮 需要          toolbar1: "code undo red ...

  8. 目标跟踪之ECO:Efficient Convolution Operators for Tracking

    一. 相关滤波算法总结 作者首先分析了 影响相关滤波算法效率 和 导致过拟合 的几个原因: 1)Model Size (模型大小) 包括两个方面: - 模型层数,对应多分辨率 Sample,比如多层 ...

  9. everything 全盘文件查找工具及正则表达式的使用

    首先需要开启 everything 工具在(字符串)查找时,对正则表达式功能的支持: [菜单栏]⇒ [Search]⇒ 勾选[Enable Regex] ctrl + i:字符大小写敏感/不敏感 1. ...

  10. Lua学习笔记(1)

    1.chunk是可以把Lua识别并执行的代码.chunk可以是单条语句,也可以是一系列语句的组合,还可以是函数,或是一个代码文件,交互模式下的每条指令(一行或多行)都是一个chunk交互模式下,判断指 ...