AngularJS表达式类似java script的代码片段,通常在数据绑定中用到,写在双大括号中,如:{{表达式}}。表达式是用$parse方法来处理的。
下面是一些合法的AngularJS表达式
你可能会认为AngularJS视图中的表达式就是java script表达式,这种认识不完全对,因为AngularJS不会用java script的eva l()函数去执行表达式。 不过除了以下几个需要区别的地方以外,你可以把AngularJS表达式看成是java script表达式:?
如果你想要在表达式中使用标准的java script,那么你应该把它写成一个控制器的方法,然后在表达式中调用这个方法。如果你想在java script中执行AngularJS表达式,你可以使用$eva l()方法。
举个例子:
?
? ? <script src="http://code.angularjs.org/angular-1.0.2.min.js">
? ? <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);
? };
}
?
?
?
? ?
? ? ? Expression:
? ? ?? ? ?
?
? ? ?
? ? ?
? ? ? ? [X ]
? ? ? ? {{expr}} => ? //这里的expr是在js中,如果想运行此angular表达式,就调用$eva l。
? ? ? ?
? ? ?
? ?
?
属性表达式计算是发生在作用域中的。java script默认是以window为作用域的。AngularJS要使用window作用域的话得用$window来指向全局window对象。 比如说,你使用window中定义的alert()方法,在AngularJS表达式中必须写成$window.alert()才行。
举个例子:
表达式在执行时是可以允许undifined和null的。 在java script中,计算a.b.c会抛出一个异常,如果这不是一个对象的话。但是如果大多数时候表达式是用来作数据绑定的,像下面这种形式:
那么表达式返回一个空值会比触发异常更有意义。因为通常我们是在等待服务器的响应,并且变量马上就会被定义和赋值。如果表达式不能容忍未定义的值,那么我们绑定的代码就不得不写成形如:
angular在执行未定义的函数a.b.c()是,也会返回undefined,不会触发异常。
你不能在表达式中使用控制结构。这样设计的原因在于AngularJS的设计理念之一就是逻辑代码都应该在控制器里。如果你需要使用条件、循环、或者处理异常,你就应该写在控制器的方法里。
当你将数据呈献给用户时,你很可能需要将数据转换为阅读友好的格式。比方说,你可能需要在显示之前将一个日期对象转换为用户本地的时间格式。你可以用链式的过滤器来传递表达式,像下面这样:
这个表达式会将name的值传递给uppercase这个过滤器。
链式过滤器使用的是下面这样的语法:
你也可以通过冒号来给过滤器传递参数,比如,将123显示成带有两位小数的形式:123 | number:2
你可能会好奇,这个$的前缀有什么用?其实这只是一个标记AngularJS专有属性的符号,用来表示区别于开发者自定义属性的符号。
AngularJS的设计是在已有的对象上添加行为。使用$做前缀的话,就能使得开发者的代码和AngularJS的代码和谐共处了。
希望你喜欢,并分享我的工作~带你走近AngularJS系列: