伏龙阁资源网

AngularJS入门教程之Scope(作用域)
站长资源 2024/11/29 佚名
2 0

AngularJS Scope(作用域)

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

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

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

如何使用 Scope

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

AngularJS 实例

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">


运行结果：


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="/UploadFiles/2021-04-02/angular.min.js">


运行结果：




我的名字是 John Doe


当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。


Scope 作用范围




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

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




AngularJS 实例




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





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">


运行结果：


    
  
  • 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="/UploadFiles/2021-04-02/angular.min.js">


运行结果：


姓氏为 Refsnes 家族成员:




    
  
  • Emil Refsnes
    • 
  
  • Tobias Refsnes
    • 
  
  • Linus Refsnes
    • 





注意 $rootScope 在循环对象内外都可以访问。
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接