AngularJS开发指南06:表达式

简介: 表达式是类似Javascript的代码片段,通常在绑定中用到,写在双大括号中如{{表达式}}。表达式是用$parse方法来处理的。

表达式是类似Javascript的代码片段,通常在绑定中用到,写在双大括号中如{{表达式}}。表达式是用$parse方法来处理的。

下面是一些合法的AngularJS表达式

  • 1+2
  • 3*10 | currency
  • user.name

AngularJS表达式 与Javascript表达式的比较

你可能会认为AngularJS视图中的表达式就是Javascript表达式,这种认识不完全对,因为AngularJS不会用Javascript的eval()函数去执行表达式。 不过除了以下几个需要区别的地方以外,你可以把AngularJS表达式看成是Javascript表达式: formatDate

  • 属性表达式:属性表达式是对应于当前的作用域的,不像Javascript对应的是全局window对象。
  • 允许未定义值:执行表达式时,AngularJS能够允许undefined或者null,不像Javascript会抛出一个异常。
  • 没有控制结构: 你不能在AngularJS表达式中使用“条件判断”、“循环”、“抛出异常”等控制结构。
  • 过滤器(类似unix中的管道操作符): 你可以通过过滤器链来传递表达式的结果。例如将日期对象转变成指定的阅读友好的格式。

如果你想要在表达式中使用标准的Javascript,那么你应该把它写成一个控制器的方法,然后在表达式中调用这个方法。如果你想在Javascript中执行AngularJS表达式,你可以使用$eval()方法。

例子

index.html:

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  </head>
  <body>
    1+2={{1+2}}
  </body>
</html>

端对端测试:

it('should calculate expression in binding', function() {
  expect(binding('1+2')).toEqual('3');
});

你可以用下面的例子试试别的表达式:

index.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> => <span ng-bind="$parent.$eval(expr)"></span>
        </li>
      </ul>
    </div>
  </body>
</html>

script.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);
  };
}

端对端测试:

it('should allow user expression testing', function() {
   element('.expressions :button').click();
   var li = using('.expressions ul').repeater('li');
   expect(li.count()).toBe(1);
   expect(li.row(0)).toEqual(["3*10|currency", "$30.00"]);
});

属性表达式

属性表达式计算是发生在作用域中的。Javascript默认是以window为作用域的。AngularJS要使用window作用域的话得用$window来指向全局window对象。 比如说,你使用window中定义的alert()方法,在AngularJS表达式中必须写成$window.alert()才行。这是为了防止意外进入全局作用域(各种bug的来源)而设计的。

index.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>

script.js:

function Cntl1($window, $scope){
  $scope.name = 'World';

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

端对端测试:

it('should calculate expression in binding', function() {
  var alertText;
  this.addFutureAction('set mock', function($window, $document, done) {
    $window.mockWindow = {
      alert: function(text){ alertText = text; }
    };
    done();
  });
  element(':button:contains(Greet)').click();
  expect(this.addFuture('alert text', function(done) {
    done(null, alertText);
  })).toBe('Hello World');
});

允许未定义值

表达式在执行时是可以允许undifinednull的。 在Javascript中,计算a.b.c会抛出一个异常,如果这不是一个对象的话。这对大部分的语言来说是有意义的,但是如果大多数时候表达式是用来作数绑定,像下面这种形式:

{{a.b.c}}

那么表达式返回一个空值会比触发异常更有意义。因为通常我们是在等待服务器的响应,并且变量马上就会被定义和赋值。如果表达式不能容忍未定义的值,那么我们绑定的代码就不得不写成形如:

{{((a||{}).b||{}).c}}

执行未定义的函数a.b.c()也会返回undefined,不会触发异常。

没有流程控制结构

你不能在表达式中使用控制结构。这样设计得原因在于AngularJS的设计理念之一就是逻辑代码都应该在控制器里。如果你需要使用条件、循环、或者处理异常,你就应该写在控制器的方法里。

过滤器

当将数据呈献给用户时,你很可能需要将数据转换为阅读友好的格式。比方说,你可能需要在显示之前将一个日期对象转换为用户本地的时间格式。你可以用链式的过滤器来传递表达式,像下面这样:

name | uppercase

这个表达式会将name的值传递给uppercase这个过滤器。

链式过滤器使用的是下面这样的语法:

value | filter1 | filter2

你也可以通过冒号来给过滤器传递参数,比如,将123显示成带有两位小数的形式:

123 | number:2

$符号

你可能会好奇,这个$的前缀有什么用?其实这只是一个标记AngularJS专有属性方法的符号,用来表示区别于其他用户自定义函数的符号。如果AngularJS不用$,那么执行a.length()会返回undeifined,因为a和angular都没有这样一个属性。

但是考虑到我们以后可能会增加一个length的方法(这会改变表达式的行为),同时你也想要自己增加一个length方法的话,那就会产生冲突。这种冲突可能出现都是因为,AngularJS的设计是在已有的对象上添加行为。使用$做前缀的话,就能使得开发者的代码和AngularJS和谐共处了。


相关文章
|
关系型数据库 开发工具 git
Greenplum ORCA 优化器的编译安装与使用
背景 ORCA 是PostgreSQL的下一代优化器,在QUERY的优化上比自带的优化器有长足的进步。 安装ORCA cmake wget https://cmake.org/files/v3.5/cmake-3.5.2.tar.gz tar -zxvf cmake-3.5.2.tar
10991 0
|
算法 存储
五大经典算法之回溯法
一、基本概念   回溯法,又称为试探法,按选优条件向前不断搜索,以达到目标。但是当探索到某一步时,如果发现原先选择并不优或达不到目标,就会退回一步重新选择,这种达不到目的就退回再走的算法称为回溯法。
1716 0
|
iOS开发 移动开发
iOS模拟器安装debug包
由于项目是Hybrid的平台,有第三方人员需要在上面开发H5应用,但是release包不能调试H5,只有debug报可以调试,但是项目源码不能交给第三方,在google搜索了下,发现一篇霜神的文章,讲的是debug包可以拷贝到其它机器运行,于是实践了一波。
1874 0
iOS模拟器安装debug包
ZOHO 免费小型企业邮箱和个人邮箱
Zoho Mail 提供免费小型企业邮箱注册。精简版只能添加一个域到您的机构帐号,最多允许10用户。如果您想添加多个域,您可以升级到标准版。10用户免费,5 GB /每用户,5 GB (共享)。 除了企业邮箱,还可以注册个人邮箱,如(freeaday@zoho.com),无需添加自己的域名。
14042 0
|
Android开发 开发者 Java
Eclipse离线安装Emmet插件----web开发者绝对熟悉的插件之一
web开发者对Emmet 这个插件相信大家都不会陌生。       之前是重配eclipse环境的时候基本都需要重新安装这个插件,之前都是通过eclipse的在线安装,但是因为懒的缘故,久而久之连在线安装的过程都懒得等了。
2125 0
|
机器学习/深度学习 人工智能 搜索推荐
机器智能加速器:大数据环境下知识工程的机遇和挑战 | 清华李涓子教授
知识图谱已经成为推动人工智能发展的核心驱动力之一。本文选自清华大学计算机科学与技术系教授、清华-青岛数据科学研究院科技大数据研究中心主任李涓子老师于2017年12月20日在阿里联合中文信息学会语言与知识计算专委会举办的知识图谱研讨会上做的以“知识工程:机器智能的加速器”为题的报告。
2695 0
|
缓存 网络协议 C++
|
Web App开发 安全 数据安全/隐私保护