详解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静态的url如何传递
May 03 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
webpack实用小功能介绍
Jan 02 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
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
局域网标准
2016/09/10 面试题
大学生会计职业生涯规划范文
2014/02/28 职场文书
小学端午节活动方案
2014/03/13 职场文书
三严三实对照检查材料
2014/09/22 职场文书
教师节感谢信
2015/01/22 职场文书
上甘岭观后感
2015/06/10 职场文书
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android