AngularJS開發指南5:AngularJS運算式詳解

來源:互聯網
上載者:User

標籤:

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開發指南5:AngularJS運算式詳解

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.