AngularJS表達式類似Javascript的代碼片段,通常在數據綁定中用到,寫在雙大括號中,如:{{表達式}}
。表達式是用$parse方法來處理的。
下面是一些合法的AngularJS表達式
1+2
3*10 | currency
user.name
你可能會認為AngularJS視圖中的表達式就是Javascript表達式,這種認識不完全對,因為AngularJS不會用Javascript的eval()
函數去執行表達式。 不過除了以下幾個需要區別的地方以外,你可以把AngularJS表達式看成是Javascript表達式:
如果你想要在表達式中使用標准的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>允許未定義值
表達式在執行時是可以允許undifined
和null
的。 在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系列:
如何在 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 的下載地址:請點這裡