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="https://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">
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="https://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 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,不会触发异常。
没有流程控制结构