Angular Expressions
Angular表达式
【原文】https://code.angularjs.org/1.2.23/docs/guide/expression
【翻译者】kowen@live.cn
For example, these are valid expressions in Angular:
Angular表达式是看起来和javascript类似的代码片段，通常是被放到双层大括号里：{{表达式}}。
例如，下面是一些有效的Angular表达式：
1+2 a+b user.name items[index]
Angular Expressions vs. JavaScript Expressions
Angular 表达式和 js表达式的对比
Angular表达式和Javascript表达式非常相似，但有以下几点不同：
上下文：Javascript表达式在全局窗口中起作用，Angular的表达式是在scope范围内中起作用。（不太恰当？）
对出错宽大处理：Javascript计算含有未定义属性的表达式会产生ReferenceError或者TypeError，Angular 表达式允许计算含有未命名或者null的表达式。
禁止流程控制语句：Angular表达式中不能包含条件、循环或者异常语句。
过滤器：你可以对Angular表达式进行格式化得到要显示的结果。
如果需要运行比较复杂的Javascript语句，可以在控制器（controller）中创建一个方法，然后从视图（view）中去调用它。如果你想运行eval（）计算angular表达式，你应当使用$eval()方法。
下面的例子可以计算各种表达式：
index.html
<div ng-controller="ExampleController" 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 track by $index">
[ <a href="" ng-click="removeExp($index)">X</a> ]
<tt>{{expr}}</tt> => <span ng-bind="$parent.$eval(expr)"></span>
</li>
</ul>
</div>
script.js
angular.module('expressionExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var exprs = $scope.exprs = [];
$scope.expr = '3*10|currency';
$scope.addExp = function(expr) {
exprs.push(expr);
};
$scope.removeExp = function(index) {
exprs.splice(index, 1);
};
}]);
Context
上下文
Angular不使用Javascript的eval()计算表达式的值，Angular有自己的$parse服务来计算表达式。
Angular表达式没有访问window、doucument或者location这些全局变量的权限。这样做的目的是：防止不小心访问了相同名称的全局的变量，很多难以排除的bug都是这个原因引起的（应该是这个意思吧）。
那怎么访问global资源呢？有一个变通的方式：Angular表达式调用的function中，可以使用$window和$location等服务来访问global资源。例子：
index.html
<div class="example2" ng-controller="ExampleController">
Name: <input ng-model="name" type="text"/>
<button ng-click="greet()">Greet</button>
<button ng-click="window.alert('Should not see me')">Won't greet</button>
</div>
script.js
angular.module('expressionExample', [])
.controller('ExampleController', ['$window', '$scope', function($window, $scope) {
$scope.name = 'World';
$scope.greet = function() {
$window.alert('Hello ' + $scope.name);
};
}]);
Forgiving
宽大处理
Angular表达式求值对undefined和null都采取了宽大处理的态度。在Javascript中，如果a不是一个对象，那么a.b.c将会抛出一个异常。但是这个表达式本身是有意义的，它主要是用来作数据绑定的，例如
{{a.b.c}}
其实，这种情况与其抛出异常，不如直接啥也不显示（也许是正在等待服务器的相应，等一会就会变成defined了）。如果表达式不进行宽大处理的话，我们写的代码就乱套成这个样子了：{{((a||{}).b||{}).c}}
类似的，调用一个包含undefined或这null的function a.b.c()，返回值是undefined。
No Control Flow Statements
禁用流程控制语句
除了三元运算符（a ? b : c），angular表达式中不允许使用流程控制语句。这么做的原因是Angular秉承着这样的思想：程序的逻辑部分应该在控制器中实现，不应该在视图中出现。如果在视图中必须使用条件、循环或者抛出异常，直接使用Javascript方法吧。
$event
事件对象
ngClick、ngFocus类似的指令会在表达式的有效范围内产生一个$event对象。
index.html
<div ng-controller="EventController">
<button ng-click="clickMe($event)">Event</button>
<p><code>$event</code>: <pre> {{$event | json}}</pre></p>
<p><code>clickEvent</code>: <pre>{{clickEvent | json}}</pre></p>
</div>
script.js
angular.module('eventExampleApp', []).
controller('EventController', ['$scope', function($scope) {
/*
* expose the event object to the scope
*/
$scope.clickMe = function(clickEvent) {
$scope.clickEvent = simpleKeys(clickEvent);
console.log(clickEvent);
};
/*
* return a copy of an object with only non-object keys
* we need this to avoid circular references
*/
function simpleKeys (original) {
return Object.keys(original).reduce(function (obj, key) {
obj[key] = typeof original[key] === 'object' ? '{ ... }' : original[key];
return obj;
}, {});
}
}]);
注意：这个例子中，$event对象可以传递到clickMe中显示，但是它却不能使用{{$event}}显示，因为$event是在这个绑定的scope之外（也就是$event只在ngClick指定的clickMe中存在）。
