AngularJS开发指南5：AngularJS表达式详解

AngularJS表达式类似Javascript的代码片段，通常在数据绑定中用到，写在双大括号中，如：{{表达式}}。表达式是用$parse方法来处理的。下面是一些合法的AngularJS表达式

1+2
3*10 | currency
user.name

你可能会认为AngularJS视图中的表达式就是Javascript表达式，这种认识不完全对，因为AngularJS不会用Javascript的eval（）函数去执行表达式。不过除了以下几个需要区别的地方以外，你可以把AngularJS表达式看成是Javascript表达式：

属性表达式：属性表达式对应于当前的作用域，不像Javascript对应的是全局的window对象。
允许未定义值：执行表达式时，AngularJS能够允许undefined或者null，不像Javascript会抛出一个异常。
没有控制结构：你不能在AngularJS表达式中使用“条件判断”、“循环”、“抛出异常”等控制结构。
过滤器（类似unix中的管道操作符）：你可以通过过滤器链来传递表达式的结果。例如将日期对象转变成指定的阅读友好的格式。

如果你想要在表达式中使用标准的Javascript，那么你应该把它写成一个控制器的方法，然后在表达式中调用这个方法。如果你想在Javascript中执行AngularJS表达式，你可以使用$eval（）方法。举个例子：<！doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
<script>
function Cntl2（$scope） {
var exprs = $scope.exprs = [];
$scope.expr= "3*10|currency";
$scope.addExp= function（expr） { //在控制器里面定义了一个addExp方法，在这个方法中，使用的是标准的js代码
exprs.push（expr）;
};
$scope.removeExp= function（index） {
exprs.splice（index,1）;
};
}
</script>
</head>
<body>
<div ng-controller="Cntl2" class="expressions">
Expression:
<input type="text" ng-model="expr" size="80"/>
<button ng-click="addExp（expr）">Evaluate</button>
<ul>
<li ng-repeat="expr in exprs">
[<a href="" ng-click="removeExp（$index）">X</a> ]
<tt>{{expr}}</tt> => <span ng-bind="$parent.$eval（expr）"></span> //这里的expr是在js中，如果想运行此angular表达式，就调用$eval。
</li>
</ul>
</div>
</body>
</html>

属性表达式

属性表达式计算是发生在作用域中的。Javascript默认是以window为作用域的。AngularJS要使用window作用域的话得用$window来指向全局window对象。比如说，你使用window中定义的alert（）方法，在AngularJS表达式中必须写成$window.alert（）才行。举个例子：<！doctype html><html ng-app><head><script src="http://code.angularjs.org/angular-1.0.2.min.js"></script><script>function Cntl1（$window, $scope）{ $scope.name = "World"; $scope.greet = function（） { （$window.mockWindow || $window）.alert（"Hello " + $scope.name）; } }</script></head><body><div class="example2" ng-controller="Cntl1">Name: <input ng-model="name" type="text"/><button ng-click="greet（）">Greet</button></div></body></html>允许未定义值表达式在执行时是可以允许undifined和null的。在Javascript中，计算a.b.c会抛出一个异常，如果这不是一个对象的话。但是如果大多数时候表达式是用来作数据绑定的，像下面这种形式：{{a.b.c}}那么表达式返回一个空值会比触发异常更有意义。因为通常我们是在等待服务器的响应，并且变量马上就会被定义和赋值。如果表达式不能容忍未定义的值，那么我们绑定的代码就不得不写成形如：{{（（a||{}）.b||{}）.c}}angular在执行未定义的函数a.b.c（）是，也会返回undefined，不会触发异常。

没有流程控制结构

你不能在表达式中使用控制结构。这样设计的原因在于AngularJS的设计理念之一就是逻辑代码都应该在控制器里。如果你需要使用条件、循环、或者处理异常，你就应该写在控制器的方法里。

过滤器

当你将数据呈献给用户时，你很可能需要将数据转换为阅读友好的格式。比方说，你可能需要在显示之前将一个日期对象转换为用户本地的时间格式。你可以用链式的过滤器来传递表达式，像下面这样：name | uppercase这个表达式会将name的值传递给uppercase这个过滤器。链式过滤器使用的是下面这样的语法：value | filter1 | filter2你也可以通过冒号来给过滤器传递参数，比如，将123显示成带有两位小数的形式：123 | number:2

$符号

你可能会好奇，这个$的前缀有什么用？其实这只是一个标记AngularJS专有属性的符号，用来表示区别于开发者自定义属性的符号。AngularJS的设计是在已有的对象上添加行为。使用$做前缀的话，就能使得开发者的代码和AngularJS的代码和谐共处了。AngularJS权威教程清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm希望你喜欢，并分享我的工作~带你走近AngularJS系列：

带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htmAngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htmAngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htmAngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-01/112573.htm