2.1 Angular中的表达式
在Angular中，表达式是运用在视图中的一个段代码，例如在第1章的示例1-2中，在计算两个数据的和时，双花括号中就是一个数值表达式，其中的值是通过调用$parse服务模块进行解析的。如果需要格式化表达式中的值，也可以调用Angular中的过滤器，例如在第1章示例1-2中，管道符 | 之后的“number:0”则调用了整数型过滤器。
2.1.1 Angular表达式与JavaScript表达式的区别
虽然都是表达式，但Angular中的表达式与传统的JavaScript中的表达式还是有明显的区别，具体表现在以下几个方面：
Angular中的所有表达式的值都来源于$scope对象，由该对象以添加属性的方式统一进行设置，并不像在传统的JavaScript中，可以由全局的window对象来调用表达式。
Angular中的表达式的容错能力很强，可以允许值出现null和undefined情况，而不会像在传统JavaScript中那样抛出异常代码。
由于Angular中表达式的值的来源固定，因此，在表达式中，不允许出现各类判断和循环语句，这一点也与传统的JavaScript区别较大，使用时需要注意。
Angular中表达式的值可以是使用管道符 | 进行格式化显示的数值，这也是不同于传统的JavaScript中表达式的一个很明显的特征。
既然Angular中的表达式与传统的JavaScript中的表达式区别很大，那么，两者之间可以相互调用吗？答案是肯定的，如果在Angular中的表达式要调用传统的JavaScript代码，需要在控制器中定义一个方法，然后由表达式调用该方法即可；而如果在传统的JavaScript代码中需要执行Angular中的表达式，则需要借助$eval()方法。
接下来，我们通过一个完整的示例来介绍Angular表达式与JavaScript表达式两者之间的相互调用过程。
示例2-1 Angular表达式与JavaScript表达式之间的相互调用
(1) 功能描述
在页面中，当点击“计算”按钮时，将调用控制器中的“testExp1()”方法，获取第一个文本框中的值并加1，然后将结果显示在浏览器的控制台中；当改变第二个文本中的Angular表达式内容时，调用$eval()方法，将该表达式的结果显示在<span>元素中。
(2) 实现代码
新建一个HTML文件2-1.html，加入如代码清单2-1所示的代码。
代码清单2-1 Angular表达式与JavaScript表达式之间的相互调用
<!doctype html>
<html ng-app>
<head>
<title>Angular与JavaScript表达式之间的相互调用</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
</head>
<body>
<div ng-controller="c2_1">
执行JavaScript表达式：<br />
<input type='text' ng-model="expr1" />
<button ng-click="testExp1(expr1)">计算</button>
<br /><br />
执行Angular表达式：<br />
<input type='text' ng-model="expr2" />
<span ng-bind="$eval(expr2)"></span>
</div>
<script type="text/javascript">
function c2_1($scope) {
$scope.expr1 = 20;
$scope.expr2 = '20+1|number:0';
$scope.testExp1 = function (expr) {
var newv = parseInt(expr) + 1;
console.log(newv);
}
}
</script>
</body>
</html>
(3) 页面效果
执行HTML文件2-1.html，最终实现的页面效果如图2-1所示。
图2-1 Angular与JavaScript表达式之间的相互调用
(4) 源码分析
在本示例的源码中，为了在点击“计算”按钮时能执行JavaScript表达式，我们在控制器中自定义了一个名为“testExp1”的函数，该函数的功能是获取传入的数值，并将其传递给一个表达式，再将经表达式计算后的结果显示在浏览器的控制台中，这些代码全部采用传统的JavaScript编写。此外，在页面中将该函数与“计算”按钮的单击事件（ng-click）绑定，最终实现在单击该按钮时执行自定义的“testExp1”的函数功能。
接下来，在第二个文本框元素和<span>元素中，分别通过数据绑定的方式关联在控制器中设置的相应属性值，而在绑定<span>元素时，又调用了$eval()方法对绑定的属性值直接进行解析，由于Angular的数据绑定是双向的，因此，当改变第二个文本框中的Angular表达式内容时，在<span>元素中执行该表达式后的结果值也会自动发生变化，最终效果如示图2-1所示。
网友评论