歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> AngularJS開發指南5:AngularJS表達式詳解

AngularJS開發指南5:AngularJS表達式詳解

日期:2017/3/1 9:34:02   编辑:Linux編程

AngularJS表達式類似Javascript的代碼片段,通常在數據綁定中用到,寫在雙大括號中,如:{{表達式}}。表達式是用$parse方法來處理的。

下面是一些合法的AngularJS表達式

  • 1+2
  • 3*10 | currency
  • user.name

你可能會認為AngularJS視圖中的表達式就是Javascript表達式,這種認識不完全對,因為AngularJS不會用Javascript的eval()函數去執行表達式。 不過除了以下幾個需要區別的地方以外,你可以把AngularJS表達式看成是Javascript表達式:

  • 屬性表達式:屬性表達式對應於當前的作用域,不像Javascript對應的是全局的window對象。
  • 允許未定義值:執行表達式時,AngularJS能夠允許undefined或者null,不像Javascript會拋出一個異常。
  • 沒有控制結構: 你不能在AngularJS表達式中使用“條件判斷”、“循環”、“拋出異常”等控制結構。
  • 過濾器(類似unix中的管道操作符): 你可以通過過濾器鏈來傳遞表達式的結果。例如將日期對象轉變成指定的閱讀友好的格式。

如果你想要在表達式中使用標准的Javascript,那麼你應該把它寫成一個控制器的方法,然後在表達式中調用這個方法。如果你想在Javascript中執行AngularJS表達式,你可以使用$eval()方法。

舉個例子:

<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
<script>
  function Cntl2($scope) {
      var exprs = $scope.exprs = [];
      $scope.expr= '3*10|currency';
      $scope.addExp= function(expr) { //在控制器裡面定義了一個addExp方法,在這個方法中,使用的是標准的js代碼
        exprs.push(expr);
      };
      $scope.removeExp= function(index) {
        exprs.splice(index,1);
      };
    }
</script>
</head>
<body>
<div ng-controller="Cntl2" class="expressions">
Expression:
<input type='text' ng-model="expr" size="80"/>
<button ng-click="addExp(expr)">Evaluate</button>
<ul>
<li ng-repeat="expr in exprs">
[<a href="" ng-click="removeExp($index)">X</a> ]
<tt>{{expr}}</tt> => <span ng-bind="$parent.$eval(expr)"></span> //這裡的expr是在js中,如果想運行此angular表達式,就調用$eval。
</li>
</ul>
</div>
</body>
</html>

屬性表達式

屬性表達式計算是發生在作用域中的。Javascript默認是以window為作用域的。AngularJS要使用window作用域的話得用$window來指向全局window對象。 比如說,你使用window中定義的alert()方法,在AngularJS表達式中必須寫成$window.alert()才行。

舉個例子:

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
    <script>
        function Cntl1($window, $scope){
        $scope.name = 'World';
        $scope.greet = function() {
            ($window.mockWindow || $window).alert('Hello ' + $scope.name);
        }
    }
    </script>
  </head>
  <body>
    <div class="example2" ng-controller="Cntl1">
      Name: <input ng-model="name" type="text"/>
      <button ng-click="greet()">Greet</button>
    </div>
  </body>
</html>
允許未定義值

表達式在執行時是可以允許undifinednull的。 在Javascript中,計算a.b.c會拋出一個異常,如果這不是一個對象的話。但是如果大多數時候表達式是用來作數據綁定的,像下面這種形式:

{{a.b.c}}

那麼表達式返回一個空值會比觸發異常更有意義。因為通常我們是在等待服務器的響應,並且變量馬上就會被定義和賦值。如果表達式不能容忍未定義的值,那麼我們綁定的代碼就不得不寫成形如:

{{((a||{}).b||{}).c}}

angular在執行未定義的函數a.b.c()是,也會返回undefined,不會觸發異常。

沒有流程控制結構

你不能在表達式中使用控制結構。這樣設計的原因在於AngularJS的設計理念之一就是邏輯代碼都應該在控制器裡。如果你需要使用條件、循環、或者處理異常,你就應該寫在控制器的方法裡。

過濾器

當你將數據呈獻給用戶時,你很可能需要將數據轉換為閱讀友好的格式。比方說,你可能需要在顯示之前將一個日期對象轉換為用戶本地的時間格式。你可以用鏈式的過濾器來傳遞表達式,像下面這樣:

name | uppercase

這個表達式會將name的值傳遞給uppercase這個過濾器。

鏈式過濾器使用的是下面這樣的語法:

value | filter1 | filter2

你也可以通過冒號來給過濾器傳遞參數,比如,將123顯示成帶有兩位小數的形式:123 | number:2

$符號

你可能會好奇,這個$的前綴有什麼用?其實這只是一個標記AngularJS專有屬性的符號,用來表示區別於開發者自定義屬性的符號。

AngularJS的設計是在已有的對象上添加行為。使用$做前綴的話,就能使得開發者的代碼和AngularJS的代碼和諧共處了。

AngularJS權威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜歡,並分享我的工作~帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹:請點這裡
AngularJS 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved