本节书摘来自华章出版社《AngularJS实战》一 书中的第2章，第2.1节，作者：陶国荣，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
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和undef?ined情况，而不会像在传统JavaScript中那样抛出异常代码。
由于Angular中表达式的值的来源固定，因此，在表达式中，不允许出现各类判断和循环语句，这一点也与传统的JavaScript区别较大，在使用时需要注意。
Angular中表达式的值可以是使用管道符“|”进行格式化显示的数值，这也是不同于传统的JavaScript中表达式的一个很明显的特征。
既然Angular中的表达式与传统的JavaScript中的表达式区别很大，那么，两者之间可以相互调用吗？答案是肯定的，如果在Angular中的表达式要调用传统的JavaScript代码，需要在控制器中定义一个方法，然后由表达式调用该方法即可；而如果在传统的JavaScript代码中执行Angular中的表达式，则需要借助$eval()方法。
接下来，我们通过一个完整的示例来介绍Angular表达式与JavaScript表达式两者之间的相互调用过程。
示例2-1 Angular表达式与JavaScript表达式之间的相互调用
（1）功能描述
在页面中，当单击“计算”按钮时，将调用控制器中的“testExp1”方法，获取第一个文本框中的值并加1，然后将结果显示在浏览器的控制台中；当改变第二个文本中的Angular表达式内容时，调用$eval方法，将该表达式的结果显示在元素中。
（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所示。
（4）源码分析
在本示例的源码中，为了在单击“计算”按钮时能执行JavaScript表达式，我们在控制器中自定义了一个名为“testExp1”的函数，该函数的功能是获取传入的数值，并将其传递给一个表达式，再将经表达式计算后的结果显示在浏览器的控制台中，这些代码全部采用传统的JavaScript编写。此外，在页面中将该函数与“计算”按钮的单击事件（ng-click）绑定，最终实现在单击该按钮时执行自定义的“testExp1”函数的功能。
接下来，在第二个文本框元素和元素中，分别通过数据绑定的方式关联在控制器中设置的相应属性值，而在绑定元素时，又调用了$eval方法对绑定的属性值直接进行解析。由于Angular的数据绑定是双向的，因此，当改变第二个文本框中的Angular表达式内容时，在元素中执行该表达式后的结果也会自动发生变化，最终效果如图2-1所示。
2.1.2 $window窗口对象在表达式中的使用
如果在控制器中调用JavaScript代码中的全局对象window时，需要通过依赖注入的$window对象来替代window，即如果是window.alert，应该将控制器的代码修改为：$window.alert，因为每一个控制器的代码只是在它管辖的作用区域中使用。通过这样的写法，可以防止它与全局的window对象混淆，出现各类诡异的异常。
接下来，我们通过一个完整的示例来介绍$window对象使用的过程。
示例2-2 $window窗口对象在表达式中的使用
（1）功能描述
在页面中，当单击“显示”按钮时，调用控制器中的show方法，以弹出窗口的方式显示文本框中输入的内容。
（2）实现代码
新建一个HTML文件2-2.html，加入如代码清单2-2所示的代码。
代码清单2-2 $window窗口对象在表达式中的使用
<!doctype html>
<html ng-app>
<head>
<title>$window窗口对象在表达式中的使用</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
</head>
<body>
<div ng-controller="c2_2">
<input type='text' ng-model="text" />
<button ng-click="show()">显示</button>
</div>
<script type="text/javascript">
function c2_2($window, $scope) {
$scope.text = "";
$scope.show = function () {
$window.alert("您输入的内容是: " + $scope.text);
}
}
</script>
</body>
</html>（3）页面效果
执行HTML文件2-2.htm，最终实现的页面效果如图2-2所示。
（4）源码分析
在本示例的代码中，在自定义控制器函数c2_2时，添加了一个$window对象，用于取代全局性的window对象。在使用时，可以像访问window对象一样，调用$window对象中各类方法或属性，如alert、conf?irm等。另外，在代码中，由于文本框与$scope的“text”属性进行了数据绑定，因此，只要文本框输入的内容发生变化，对应的$scope.text属性值也随之改变，所以，弹出的窗口能即时动态显示在文本框中输入的内容值。
2.1.3 Angular表达式的容错性
与传统的JavaScript表达式相比，Angular表达式的容错能力更强大，它允许表达的值为undef?ined或null类型，而在传统的JavaScript表达式中，如果出现这两种类型，则会抛出“ReferenceError”类型的错误提示。
接下来，我们通过一个完整的示例来介绍Angular表达式的容错性。
示例2-3 Angular表达式的容错性
（1）功能描述
在页面中，将一个未定义的属性值与文本框绑定，另外，在单击“单击”按钮时，在浏览器的控制台中输入一个未定义的变量值，分别观察两者在页面控制台上的显示信息。
（2）实现代码
新建一个HTML文件2-3.html，加入如代码清单2-3所示的代码。
代码清单2-3 Angular表达式的容错性
<!doctype html>
<html ng-app>
<head>
<title>Angular表达式中的容错性</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
</head>
<body>
<div ng-controller="c2_3">
<span>{{tmp}}</span>
<button ng-click="error();">单击</button>
</div>
<script type="text/javascript">
function c2_3($scope) {
$scope.temp = "Angular";
$scope.error = function () {
console.log(tmp);
}
}
</script>
</body>
</html>（3）页面效果
执行HTML文件2-3.html，最终实现的页面效果如图2-3所示。
（4）源码分析
在本示例中，虽然页面中的元素绑定了一个未定义的Angular表达式，但由于该表达式具有很好的容错性，允许使用未定义或空值表达式，因此，浏览器的控制台并没有异常信息显示。
当单击页面中的“单击”按钮时，将执行在控制器中自定义的error函数，在该函数中将一个未定义的变量“tmp”输出至控制台。从控制台显示的信息可以看出，由于未定义被打印的变量“tmp”，因此，使用未定义的变量将在JavaScript代码中抛出“ReferenceError”类型异常，详细效果如图2-3所示。
通过上面几个示例的介绍，我们明显感觉Angular表达式的性能要比传统的JavaScript强大不少。但在实际使用Angular工具开发应用时，如果在页面中使用表达式，不能将逻辑性的判断语句或循环语句写入表达式中，因为在Angular中，这类页面的应用逻辑必须写在管理页面的控制器代码中，而不是直接写在页面的表达式中，这点需要在使用Angular表达式时注意。
