與傳統(tǒng)的JavaScript表達(dá)式相比，Angular表達(dá)式的容錯(cuò)能力更強(qiáng)大，它允許表達(dá)的值為undefined或null類(lèi)型，而在傳統(tǒng)的JavaScript表達(dá)式中，如果出現(xiàn)這兩種類(lèi)型，則會(huì)拋出“ReferenceError”類(lèi)型的錯(cuò)誤提示。
接下來(lái)，我們通過(guò)一個(gè)完整的示例，來(lái)介紹Angular表達(dá)式的容錯(cuò)性。示例2-3 Angular表達(dá)式的容錯(cuò)性
(1)???功能描述
? 在頁(yè)面中，將一個(gè)未定義的屬性值與文本框相綁定，另外，在點(diǎn)擊“單擊”按鈕時(shí)，在瀏覽器的控制臺(tái)中輸入一個(gè)未定義的變量值，分別觀(guān)察兩者在頁(yè)面控制臺(tái)上的顯示信息。
(2)???實(shí)現(xiàn)代碼
新建一個(gè)HTML文件2-3.html，加入如代碼清單2-3所示的代碼。
代碼清單2-3 Angular表達(dá)式的容錯(cuò)性
<!doctype html>
<html ng-app>
<head>
Angular表達(dá)式中的容錯(cuò)性
???<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)???頁(yè)面效果
? 執(zhí)行HTML文件2-3.html，最終實(shí)現(xiàn)的頁(yè)面效果如下圖2-3所示。
圖2-3 Angular表達(dá)式中的容錯(cuò)性
(4)???源碼分析
? 在本示例中，雖然頁(yè)面中的元素綁定了一個(gè)未定義的Angular表達(dá)式，但由于該表達(dá)式具有很好的容錯(cuò)性，允許使用未定義或空值表達(dá)式，因此，瀏覽器的控制臺(tái)并未有異常信息顯示。
當(dāng)點(diǎn)擊頁(yè)面中的“單擊”按鈕時(shí)，將執(zhí)行在控制器中自定義的error()函數(shù)，在該函數(shù)中將一個(gè)未定義的變量“tmp”打印至控制臺(tái)。從控制臺(tái)顯示的信息可以看出，由于被打印的變量“tmp”未定義，因此，使用未定義的變量，將在JavaScript代碼中拋出“ReferenceError”類(lèi)型異常，詳細(xì)效果見(jiàn)圖2-3。
? 通過(guò)上面幾個(gè)示例的介紹，我們明顯感覺(jué)Angular表達(dá)式的性能要比傳統(tǒng)的JavaScript強(qiáng)大不少，但在實(shí)際使用Angular工具開(kāi)發(fā)應(yīng)用時(shí)，如果在頁(yè)面中使用表達(dá)式，不能將邏輯性的判斷語(yǔ)句或循環(huán)語(yǔ)句寫(xiě)入表達(dá)式中，因?yàn)樵贏ngular中，這類(lèi)頁(yè)面的應(yīng)用邏輯必須寫(xiě)在管理頁(yè)面的控制器代碼中，而不是直接寫(xiě)在頁(yè)面的表達(dá)式中，這點(diǎn)需要在使用Angular表達(dá)式時(shí)注意。
