详解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 相关文章推荐
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
详解JS ES6编码规范
May 07 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
深入php多态的实现详解
2013/06/09 PHP
php 类自动载入的方法
2015/06/03 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
python mysqldb连接数据库
2009/03/16 Python
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python实现网站的模拟登录
2016/01/04 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
学年末自我鉴定
2014/01/21 职场文书
2014年商场工作总结
2014/11/22 职场文书
三年级学生评语大全
2014/12/26 职场文书
委托书格式要求
2015/01/28 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP