表达式(Expressions)是类Javascript的代码片段,通常放置在绑定区域中(如{{expression}})。表达式通过$parse服务(http://code.angularjs.org/1.0.2/docs/api/ng.$parse)解析执行。
例如,以下是angular中有效的表达式:
一、Angular表达式 vs. Js 表达式
这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angular表达式想象为带有以下差异的javascript表达式:
另一方面,如果我们想(在angular表达式中)执行任意的Javascript代码,我们可以将那些代码写到Controller的一个方法中并调用它。如果我们想在javascript中eval()一个angular表达式,可以使用$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的表达式解析环境的上下文是scope,而javascript则是window(应该是指严格模式evel的时候),angular需要通过$window访问global window对象。例如,如果我们需要在表达式中调用定义在window对象上的alert(),我们需要使用$window.alert()。这样做的用意是避免意外访问了公共属性(global state)(一个同源的小BUG?a common source of subtle bugs)。
新闻热点
疑难解答
图片精选