紧接上节谈到，在这里介绍关于angularjs的表达式expression。expression指的是javascript的一小片段代码，通常用于绑定（binding）例如：{
{ expression }}。在angularjs中是通过 service解析。
$parse用法： $parse(expression);
- 参数：javascript代码片段。
- 返回值：{function(context, locals)}，表达式编译结果：
- context：嵌入表达式执行的作用于scope。
- locals：本地变量，常用于替换重写context。
- 返回值同样带有
assign属性，允许为表达式赋值。
下面的表达式在angularjs将都是合法的表达式：
1+2 3*10 | currency user.name
angularjs表达式vs. javascript表达式
angularjs视图表达式有点像javascript表达式，但是并不是利用javascript表达式eval()函数解析执行的，与javascript表达式区别如下：
- 所有属性都依赖于scope作用于。并不是javascript的全局作用于window。
- 表达式计算兼容处理null和undefined，而javascript则会抛出NullPointerExceptions异常。
- 没有控制流程语句，条件，循环throw。
- 过滤器，多余angularjs表达式计算结果可以通过过滤器转化格式，|表达式，如时间，货币，数字格式等。
注： 对于angularjs表达式，可以采用方法解析执行。
Demo
html:
1 <! doctype html > 2 3 < html ng-app > 4 5 < head > 6 7 < script src ="http://code.angularjs.org/angular-1.0.2.min.js" ></ script > 8 9 < script src ="script.js" ></ script > 10 11 </ head > 12 13 < body > 14 15 < div ng-controller ="Cntl2" class ="expressions" > 16 17 Expression:
18 19 < input type ='text' ng-model ="expr" size ="80" /> 20 21 < button ng-click ="addExp(expr)" >Evaluate
</ button > 22 23 < ul > 24 25 < li ng-repeat ="expr in exprs" > 26 27 [
< a href ="" ng-click ="removeExp($index)" >X
</ a > ]
28 29 < tt >{
{expr}}
</ tt > =>
< span ng-bind ="$parent.$eval(expr)" ></ span > 30 31 </ li > 32 33 </ ul > 34 35 </ div > 36 37 </ body > 38 39 </ html >
js:
1 function Cntl2($scope) {
2 3 var exprs = $scope.exprs = [];
4 5 $scope.expr = '3*10|currency';
6 7 $scope.addExp =
function(expr) {
8 9 exprs.push(expr);
10 11 };
12 13 14 15 $scope.removeExp =
function(index) {
16 17 exprs.splice(index, 1);
18 19 };
20 21 }
jsfiddle演示:
属性执行
angularjs所有的表达式执行都将依赖于一个作用于scope,不同于javascript的window全局作用域.如果你想引用全局作用于window,这必须依赖于中引用$window service. 实例如下:
html:
1 <! doctype html > 2 3 < html ng-app > 4 5 < head > 6 7 < script src ="http://code.angularjs.org/angular-1.0.2.min.js" ></ script > 8 9 < script src ="script.js" ></ script > 10 11 </ head > 12 13 < body > 14 15 < div class ="example2" ng-controller ="Cntl1" > 16 17 Name:
< input ng-model ="name" type ="text" /> 18 19 < button ng-click ="greet()" >Greet
</ button > 20 21 </ div > 22 23 </ body > 24 25 </ html >
js:
1 function Cntl1($window, $scope){
2 3 $scope.name = 'World';
4 5 6 7 $scope.greet =
function() {
8 9 ($window.mockWindow || $window).alert('Hello ' + $scope.name);
10 11 }
12 13 }
jsfiddle演示:
兼容执行
如上所述：angularjs表达式计算兼容处理null和undefined不会抛出任何异常，因为这将现实处理在view显示，而javascript则会抛出NullPointerExceptions异常。例如表达式
{ {a.b.c}}，与其同等效果的javascript代码将是{ {((a||{}).b||{}).c}}。 无控制流程
在angularjs表达式中将不存在条件，循环，throw控制流程语句。因为angularjs作为mvc或者贴近pm模式要求表现层逻辑必须包含在controller中，而不是view，view应该足够的被动。在表达式模式中都尽力将表现层不变的表现逻辑和多样易变的UI view中抽离出来，便于更好的自动化测试构建等。
过滤器（Filters）
数据仅作为一种持久化存储领域模型（表现层或者确切的成为视图模型viewmodel），当展现给用户的时候很多时候需要更友好的方式，比如时间，数字，货币格式本地化，
例如： name | uppercase ， 123 | number:2，3*10|currency。
filters支持链式写法，如何powershell或者其他操作系统外壳语言一样的管道式模型，形如 value | filter1 | filter2。
其他资源可参考本博客中其他angularjs随笔或者angularjs官方文档。