AngularJS开发指南5：AngularJS表达式详解

浏览数：41 / 时间：2015年06月09日

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>