快捷導(dǎo)航

AngularJs expression詳解及簡單示例

更新時間：2016年09月01日 16:24:46 作者：Lcllao

本文主要介紹AngularJs expression,這里整理了詳細(xì)的資料，并附示例代碼，有興趣的小伙伴可以參考下

表達(dá)式（Expressions）是類Javascript的代碼片段，通常放置在綁定區(qū)域中（如｛｛expression｝｝）。表達(dá)式通過$parse服務(wù)（http://code.angularjs.org/1.0.2/docs/api/ng.$parse）解析執(zhí)行。

　　例如，以下是angular中有效的表達(dá)式：

1+2
3*10 | currency
user.name

一、Angular表達(dá)式 vs. Js 表達(dá)式

　　這很容易讓人將angular視圖表達(dá)式聯(lián)想為javascript表達(dá)式，但這并不完全正確，因?yàn)閍ngular不是通過javascript的eval()對表達(dá)式進(jìn)行求值。你可以將angular表達(dá)式想象為帶有以下差異的javascript表達(dá)式：

屬性求值：所有屬性的求值是對于scope的，而javascript是對于window對象的。
寬容（forgiving）：表達(dá)式求值，對于undefined和null，angular是寬容的，但Javascript會產(chǎn)生NullPointerExceptions（-_-!!!!怎么我沒見過）。
沒有流程控制語句：在angular表達(dá)式里，我們不能做以下任何的事：條件分支、循環(huán)、拋出異常。
過濾器（filters）：我們可以就將表達(dá)式的結(jié)果傳入過濾器鏈（filter chains）。例如將日期對象轉(zhuǎn)換為本地指定的人類可讀的格式。

　　另一方面，如果我們想（在angular表達(dá)式中）執(zhí)行任意的Javascript代碼，我們可以將那些代碼寫到Controller的一個方法中并調(diào)用它。如果我們想在javascript中eval()一個angular表達(dá)式，可以使用$eval()方法。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="ExpressionTest">
<head>
  <meta charset="UTF-8">
  <title>expression-e1</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
  </style>
</head>
<body ng-controller="MyCtrl">
1 + 2 = {{1+2}}
<br/>
Expression:
<input type="text" ng-model="expr"/>
<button ng-click="addExp(expr)">Evaluate</button>
<ul>
  <li ng-repeat="expr in exprs">
    [<a ng-click="removeExp($index)" href="">X</a>]
    <tt>{{expr}}</tt>=><span ng-bind="$parent.$eval(expr)"></span>
  </li>
</ul>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  var app = angular.module("ExpressionTest", []);
  app.controller("MyCtrl", function ($scope) {
    var exprs = $scope.exprs = [];
    $scope.expr = "3*10|currency";
    $scope.addExp = function(expr) {
      exprs.push(expr);
    };
    $scope.removeExp = function (index) {
      exprs.splice(index, 1);
    };
  });
</script>
</body>
</html>

二、屬性求值（Property Evaluation）

　　angular的表達(dá)式解析環(huán)境的上下文是scope，而javascript則是window（應(yīng)該是指嚴(yán)格模式evel的時候），angular需要通過$window訪問global window對象。例如，如果我們需要在表達(dá)式中調(diào)用定義在window對象上的alert()，我們需要使用$window.alert()。這樣做的用意是避免意外訪問了公共屬性（global state）（一個同源的小BUG？a common source of subtle bugs）。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="PropertyEvaluation">
<head>
  <meta charset="UTF-8">
  <title>PropertyEvaluation</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
  </style>
</head>
<body>
<div ng-controller="MyCtrl">
  Name: <input ng-model="name" type="text"/>
  <button ng-click="greet()">Greet</button>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  var app = angular.module("PropertyEvaluation", []);
  app.controller("MyCtrl", function ($scope,$window) {
    $scope.name = "Kitty";
    $scope.greet = function() {
      $window.alert("Hello " + $scope.name);
    };
  });
</script>
</body>
</html>

三、Forgiving（寬容，容錯？）

　　表達(dá)式求值對undefined和null是寬容的。在javascript中，當(dāng)a不是object的時候，對a.b.c求值，那么將會拋出一個異常。有時候這對于通用語言來說是合理的，而表達(dá)式求值主要用于數(shù)據(jù)綁定，一般形式如下：

　　如果a不存在，沒有任何顯示似乎比拋出異常更加合理（除非我們等待服務(wù)端響應(yīng)，不一會兒就會被定義）。如果表達(dá)式求值時不夠?qū)捜荩敲次覀內(nèi)绱嘶靵y地寫綁定代碼：

{{((a||{}).b||{}).c}} //這……

　　相似地，引用一個函數(shù)a.b.c()時，如果它是undefined或者null，那么簡單地返回undefined。

四、沒有控制流程語句（No Control Flow Statements）

　　我們不可以在表達(dá)式中寫流程控制語句。背后的原因是，angular的核心體系是應(yīng)用的邏輯應(yīng)當(dāng)在controller（的scope）里面，而不是在view里面。如果我們需要在視圖表達(dá)式中加入條件分支、循環(huán)或者拋出異常的話，可以委托javascript方法去代替（可以調(diào)用scope中的方法）。

五、過濾器（Filters）

　　當(dāng)我們向用戶呈現(xiàn)數(shù)據(jù)時，我們可能需要將數(shù)據(jù)從原始格式轉(zhuǎn)換為友好（可讀性強(qiáng)）的格式。例如，我們有一個數(shù)據(jù)對象需要在顯示給用戶之前根據(jù)地域進(jìn)行格式化。我們可以將表達(dá)式傳遞給一連串的過濾器，如：

name | uppercase

　　這表達(dá)式求值器可簡單地傳遞name的值到uppercase過濾器中。

　　鏈?zhǔn)竭^濾器使用這種語法：

value | filter1 | filter2

　　我們也可以傳送用冒號分割的參數(shù)到filter中，例如，以兩位小數(shù)的格式顯示123：

123 | number:2

六、前綴”$”

　　我們可能會感到奇怪，前綴”$”的意義是什么？它是angular為了使本身的API名稱能夠區(qū)別于其他的API而使用的一個簡單的前綴（防止沖突）。如果angular不使用$，那么對a.length()求值將返回undefined。因?yàn)閍和angular本身都沒有定義這個屬性。

　　考慮到angular將來的版本可能會選擇增加length這個方法，這將令這個表達(dá)式的行為發(fā)生改變。更糟糕的是，我們開發(fā)者可能會創(chuàng)建一個length屬性，那么將與angular發(fā)生沖突。這個問題存在因?yàn)閍ngular通過增加方法擴(kuò)展了當(dāng)前存在的對象。通過加入前綴”$”，angular保留了特定的namespace，所以angular的開發(fā)者與使用angular的開發(fā)者都可以和諧共處。

您可能感興趣的文章: