详解JavaScript的AngularJS框架中的表达式与指令


Posted in Javascript onMarch 05, 2016

“指令属性”就是绑定在DOM元素上的函数,它可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等等等。

当浏览器启动、开始解析HTML(像平时一样)时,DOM元素上的指令属性就会跟其他属性一样被解析。

当一个Angular.js应用启动,Angular编译器就会遍历DOM树(从有ng-app指令属性的那个DOM元素开始,如我们在本系列第一篇里所提过的),解析HTML,寻找这些指令属性函数。

当在一个DOM元素上找到一个或多个这样的指令属性函数,它们就会被收集起来、排序,然后按照优先级顺序被执行。

每个指令属性都有自己的优先级,在我们关于指令属性的专题文章里(http://www.ng-newsletter.com/posts/directives.html),你可以找到更深入的信息。

Angular.js应用的动态性和响应能力,都要归功于指令属性。之前我们已经看过一些指令属性的用例:

ng-model

<input ng-model="name" name="Name" placeholder="Enter your name"/>
<h4>Your name: {{ name }}</h4>

试试看

详解JavaScript的AngularJS框架中的表达式与指令

ng-model指令属性(我们在之前的章节使用过它),被用来将DOM文本输入框的值,跟controller里的$scope model绑定起来。具体的实现过程,是在这个值上绑定了一个$watch函数(类似JavaScript里的事件监听函数)。

$watch函数(在使用时)运行在Angular.js的事件循环(即$digest循环)里,让Angular.js能够对DOM进行相应的更新。请关注我们关于$digest循环的高级文章!

在Angular.js应用的开发中,我们用指令属性来将行为绑定到DOM上。指令属性的使用,是一个 应用能否拥有动态性、响应能力的关键。Angular.js提供了很多缺省的指令属性,现在让我们来看看其中几个,以及如何使用它们。

几个常见的指令属性:

{{ 表达式 }}

这个双大括号指令属性,使用$watch()函数,给括号内的表达式注册了一个监听器。正是这个$watch函数,让Angular.js能够实时自动更新view。

那么,到底什么算是个表达式?
要想理解指令属性的运作,我们必须先理解表达式,所以这里我们就绕个路,看看本系列的第五部分——表达式。在之前的例子里我们已经见过表达式,例如 {{ person.name }} 和 {{ clock }}。

{{ 8 + 1 }}9
{{ person }}{"name":"Ari Lerner"}
{{ 10 * 3.3 | currency }}$33.00

最后的例子里 (10 * 3.3 | currency) 用了一个过滤器。本系列之后的部分,会深入介绍过滤器。

表达式粗略来看有点像 eval(javascript) 的结果。它们会经过Angular.js的处理,从而拥有以下重要而独特的性质:

所有表达式都在scope这个context里被执行,因此可以使用所有本地 $scope 中的变量。
如果一个表达式的执行导致类型错误或引用错误,这些错误将不会被抛出。
表达式里不允许任何控制函数流程的功能(如if/else等条件语句)
表达式可接受一个或多个串联起来的过滤器。
试试看

详解JavaScript的AngularJS框架中的表达式与指令

试试输入“person“,“clock“或其他数学算式如2+4。你甚至可以操作scope,例如,试试输入person.name = ”Ari”; person.age = 28; person 或 clock

表达式都运行在调用它们的scope里,所以一个表达式可访问并操作其scope上的一切。由此,你可以使用表达式遍历其scope的属性(我们在ng-repeat中会看到这一应用)、调用scope里的函数,或者对scope中的变量进行数学运算。

现在,让我们回到指令属性…

ng-init

ng-init指令属性是一个在启动时运行的函数(在程序进入运行阶段之前)。它让我们能够在程序运行前设定初始变量的值:

<b ng-init='name = "Ari Lerner"'>Hello, {{ name }}</b>

试试看

Hello, Ari Lerner

ng-click

ng-click指令属性给DOM元素注册了一个点击事件的监听器。当此DOM元素上有点击事件发生(即当此button或link被点击时),Angular.js就会执行表达式的内容,并相应地更新view。

<button ng-click="counter = counter + 1">Add one</button>
Current counter: {{ counter }}

试试看

详解JavaScript的AngularJS框架中的表达式与指令

我们也可以用ng-click 来调用在controller里写好并绑定在$scope上的函数,例如:

<button ng-click="sayHello()">Say hello</button>

controller 里的函数:

app.controller('MyController', function($scope) {
  $scope.sayHello = function() {
   alert("hello!");
  }
 });

试试看

详解JavaScript的AngularJS框架中的表达式与指令

ng-show / ng-hide

ng-show和ng-hide指令,根据赋予它们的表达式的值的真假性(truthy),来显示和隐藏它们所属的那一部分DOM。

我们在这里不会深入,但你应该熟悉JavaScript中变量值的“truthy”和“falsy”概念。

<button ng-init="shouldShow = true" ng-click="shouldShow = !shouldShow">Flip the shouldShow variable</button>
 <div ng-show="shouldShow">
  <h3>Showing {{ shouldShow }}</h3>
 </div> <div ng-hide="shouldShow">
  <h3>Hiding {{ shouldShow }}</h3>
 </div>

ng-repeat

ng-repeat指令遍历一个数据集合中的每个数据元素,加载HTML模版把数据渲染出来。被重复使用的模版元素,就是我们绑定了这个指令属性的DOM元素。每一个使用模版渲染的DOM元素都有自己的scope。

在更多的解释之前,我们先看一个例子。假设我们的controller里有这样一个数据元素的数组:

$scope.roommates = [
  { name: 'Ari'},
  { name: 'Q'},
  { name: 'Sean'},
  { name: 'Anand'}
 ];

在view里我们可以用ng-repeat来遍历这个集合里的数据:

<ul>
  <li ng-repeat="person in roommates">{{ person.name }}</li> </ul>

对赋予ng-repeat的表达式稍作改动,我们还可以用它遍历一个由成对的key-value数据组成的集合。例如,假设我们有一个人名和他们最喜欢的颜色的数据集合:

$scope.people = {
  'Ari': 'orange',
  'Q': 'purple',
  'Sean': 'green'
 }

要遍历它,我们可以给ng-repeat指令属性赋予这个表达式: (key, value) in object:

<ul>
  <li ng-repeat="(name, color) in people">{{ name }}'s favorite color is {{ color }}
  </li>
 </ul>

 

Javascript 相关文章推荐
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
浅析vue-router原理
Oct 19 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
原生js实现日期选择插件
May 21 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 #Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 #Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 #Javascript
js控制TR的显示隐藏
Mar 04 #Javascript
Node.js操作Firebird数据库教程
Mar 04 #Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 #Javascript
node.js微信公众平台开发教程
Mar 04 #Javascript
You might like
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
JS 面向对象的5钟写法
2009/07/31 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
python 编程之twisted详解及简单实例
2017/01/28 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
详解Python中的测试工具
2019/06/09 Python
python 列表推导式使用详解
2019/08/29 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
python对文件的操作方法汇总
2020/02/28 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
物流专员岗位职责
2014/02/17 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
大学生社会实践评语
2014/04/25 职场文书
爱心倡议书范文
2014/05/12 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
2016年元旦寄语
2015/08/17 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
对PyTorch中inplace字段的全面理解
2021/05/22 Python
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android