详解angularjs 学习之 scope作用域


Posted in Javascript onJanuary 15, 2018

简介

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

Scope 是一个存储应用数据模型的对象,有可用的方法和属性。

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

作用域是Web应用的控制器和视图之间的粘结剂:

控制器 --> 作用域 --> 视图(DOM)
指令 --> 作用域 --> 视图(DOM)

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

<div ng-controller="myCtrl">
<h1>{{name}}</h1>
</div>

<script>
var app = angular.module('test', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "天下行走";
});
</script>

输出结果: 天下行走

控制器中创建一个属性名 "name" ,对应了视图中使用 {{ }} 中的名称。

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

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

AngularJS 应用组成如下:

View(视图) , 即 HTML。

Model(模型) , 当前视图中可用的数据。

Controller(控制器) , 即 JavaScript 函数,可以添加或修改属性。

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

再来看个例子:

<div ng-app="myApp" ng-controller="myCtrl">
  输入你的名字:
  <input ng-model="name">
  <h1>{{greeting}}</h1>
  <button ng-click='sayHello()'>greet</button>  
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "张三";
  $scope.sayHello = function() {
    $scope.greeting = $scope.name + '是个笨蛋!';
  };
});
</script>

在这个例子中,

  1. 控制器: MyCtrl ,它引用了 $scope 并在其上注册了两个属性和一个方法
  2. $scope 对象:持有上面例子所需的数据模型,包括 name 属性、 greeting 属性 (注:这是在 sayHello() 方法被调用时注册的) 和 sayHello() 方法
  3. 视图:拥有一个输入框、一个按钮以及一个利用双向绑定来显示数据的内容块

那么具体整个示例有这样两个流程,从控制器发起的角度来看就是:

1、控制器往作用域中写属性:

给作用域中的 name 赋值,然后作用域通知视图中的 input 数据变化了, input 因为通过 ng-model 实现了双向绑定可以知道 name 的变化,进而在视图中渲染出改变的值

2、控制器往作用域中写方法

给作用域中的 sayHello() 方法赋值,该方法被视图中的 button 调用,因为 button 通过 ng-click 绑定了该方法,当用户点击按钮时, sayHello() 被调用,这个方法读取作用域中的 name 属性,加上后缀字符串,然后赋值给在作用域中新创建的 greeting 属性

整个示例的过程如果从视图的角度看,那主要是以下三个部分:

1、input 中的渲染逻辑:展示了通过 ng-model 进行的作用域和 视图中某表单元素的双向绑定

  1. 根据 ng-model 中的 name 去作用域中取,如果已经有值,那么用这个默认值填充当前的输入框
  2. 接受用户输入,并且将用户输入的字符串传给 name ,这时候作用域中的该属性值实时更新为用户输入的值

2、button 中的逻辑

接受用户单击,调用作用域中的 sayHello() 方法

3、{{greeting}} 的渲染逻辑

  1. 初始阶段 :在用户未单击按钮时,不显示内容
  2. 取值阶段 :在用户单击后,这个表达式会去 scope 中取 greeting 属性,而本例中这个作用域和控制器是同一个的,这时候,该作用域下 greeting 属性已经有了,这时候这个属性就被取回来了
  3. 计算阶段 :在当前作用域下去计算 greeting 表达式,然后渲染视图,显示 张三是个笨蛋!

经过以上的两种角度分析示例过程,我们可以知道: 作用域(scope) 对象以及其属性是视图渲染的唯一数据来源。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
js实现自定义右键菜单
May 18 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 #Javascript
关于axios如何全局注册浅析
Jan 14 #Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 #Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 #Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 #Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 #Javascript
vuejs实现递归树型菜单组件
Jan 13 #Javascript
You might like
多重?l件?合查?(一)
2006/10/09 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php生成shtml类用法实例
2014/12/09 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
js给selected添加options的方法
2015/05/06 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
深入理解react 组件类型及使用场景
2019/03/07 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
电子专业毕业生自我鉴定
2014/01/22 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
库房保管员岗位职责
2014/04/07 职场文书
辅导员评语
2014/05/04 职场文书
商家认证委托书格式
2014/10/16 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书