与传统的JavaScript表达式相比，Angular表达式的容错能力更强大，它允许表达的值为undefined或null类型，而在传统的JavaScript表达式中，如果出现这两种类型，则会抛出“ReferenceError”类型的错误提示。
接下来，我们通过一个完整的示例，来介绍Angular表达式的容错性。示例2-3 Angular表达式的容错性
(1) 功能描述
在页面中，将一个未定义的属性值与文本框相绑定，另外，在点击“单击”按钮时，在浏览器的控制台中输入一个未定义的变量值，分别观察两者在页面控制台上的显示信息。
(2) 实现代码
新建一个HTML文件2-3.html，加入如代码清单2-3所示的代码。
代码清单2-3 Angular表达式的容错性
<!doctype html>
<html ng-app>
<head>
Angular表达式中的容错性
<script src="../Script/angular.min.js"
type="text/javascript"></script>
</head>
<body>
<divng-controller="c2_3">
<span>{{tmp}}</span>
单击
</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所示。
图2-3 Angular表达式中的容错性
(4) 源码分析
在本示例中，虽然页面中的元素绑定了一个未定义的Angular表达式，但由于该表达式具有很好的容错性，允许使用未定义或空值表达式，因此，浏览器的控制台并未有异常信息显示。
当点击页面中的“单击”按钮时，将执行在控制器中自定义的error()函数，在该函数中将一个未定义的变量“tmp”打印至控制台。从控制台显示的信息可以看出，由于被打印的变量“tmp”未定义，因此，使用未定义的变量，将在JavaScript代码中抛出“ReferenceError”类型异常，详细效果见图2-3。
通过上面几个示例的介绍，我们明显感觉Angular表达式的性能要比传统的JavaScript强大不少，但在实际使用Angular工具开发应用时，如果在页面中使用表达式，不能将逻辑性的判断语句或循环语句写入表达式中，因为在Angular中，这类页面的应用逻辑必须写在管理页面的控制器代码中，而不是直接写在页面的表达式中，这点需要在使用Angular表达式时注意。
网友评论