angularjs運算式-Expression

最後更新：2013-12-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

緊接上節談到再談angularjs DI(Dependency Injection)，在這裡介紹關於angularjs的運算式expression。expression指的是javascript的一小片段代碼，通常用於綁定binding）例如：{{ expression }}。在angularjs中是通過$parse service解析。

$parse用法： $parse(expression);

下面的運算式在angularjs將都是合法的運算式：

angularjs運算式vs. javascript運算式

angularjs視圖運算式有點像javascript運算式，但是並不是利用javascript運算式eval()函數解析執行的，與javascript運算式區別如下：

註：對於angularjs運算式，可以採用$eval()方法解析執行。

Demo

html:

 
  <!doctype html> 
   
  <html ng-app> 
   
  <head> 
   
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script> 
   
  <script src="script.js"></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> =&gt; <span ng-bind="$parent.$eval(expr)"></span> 
   
  </li> 
   
  </ul> 
   
  </div> 
   
  </body> 
   
  </html>

js:

 
  function Cntl2($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);

};

}

jsfiddle示範:http://jsfiddle.net/whitewolf/yduLt/1/

屬性執行

angularjs所有的運算式執行都將依賴於一個作用於scope,不同於javascript的window全域範圍.如果你想引用全域作用於window,這必須依賴於上節的DI特性中引用$window service. 執行個體如下:

html:

 
  <!doctype html> 
   
  <html ng-app> 
   
  <head> 
   
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script> 
   
  <script src="script.js"></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>

js:

 
  function Cntl1($window, $scope){  
   
  $scope.name = 'World';  
   
     
   
  $scope.greet = function() {  
   
  ($window.mockWindow || $window).alert('Hello ' + $scope.name);  
   
  }  
   
  }

jsfiddle示範:http://jsfiddle.net/whitewolf/MF2Ku/1/

相容執行

如上所述：angularjs運算式計算相容處理null和undefined不會拋出任何異常，因為這將現實處理在view顯示，而javascript則會拋出NullPointerExceptions異常。例如運算式

{{a.b.c}}，與其同等效果的javascript代碼將是{{((a||{}).b||{}).c}}。不控制流程

在angularjs運算式中將不存在條件，迴圈，throw控制流程程語句。因為angularjs作為mvc或者貼近pm模式要求表現層邏輯必須包含在controller中，而不是view，view應該足夠的被動。在運算式模式中都儘力將表現層不變的表現邏輯和多樣易變的UI view中抽離出來，便於更好的自動化測試構建等。

過濾器Filters）

資料僅作為一種持久化儲存領域模型表現層或者確切的成為視圖模型viewmodel），當展現給使用者的時候很多時候需要更友好的方式，比如時間，數字，貨幣格式本地化，

例如： name | uppercase ， 123 | number:2，3*10|currency。

filters支援鏈式寫法，如何powershell或者其他動作系統外殼語言一樣的管道式模型，形如 value | filter1 | filter2。

其他資源可參考本部落格中其他angularjs隨筆或者angularjs官方文檔http://angularjs.org/。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More