详解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 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
10个新的最有前途的JavaScript框架
Mar 12 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
JS函数重载的解决方案
May 13 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
Javascript动画效果(1)
Oct 11 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
django form和field具体方法和属性说明
2020/07/09 Python
浅析Python的命名空间与作用域
2020/11/25 Python
联想中国官方商城:Lenovo China
2017/10/18 全球购物
会展中心部门工作职责
2013/11/27 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
培训研修方案
2014/06/06 职场文书
出售房屋委托书范本
2014/09/24 职场文书
党员民主评议个人总结
2014/10/20 职场文书
田径运动会通讯稿
2015/07/18 职场文书
小学新课改心得体会
2016/01/22 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
人民币符号
2022/02/17 杂记
Java实现二分搜索树的示例代码
2022/03/17 Java/Android