angularjs表达式-Expression-阿里云开发者社区

开发者社区> 开发与运维> 正文

angularjs表达式-Expression

简介:

    紧接上节谈到再谈angularjs DI(Dependency Injection),在这里介绍关于angularjs的表达式expression。expression指的是javascript的一小片段代码,通常用于绑定(binding)例如:` expression `。在angularjs中是通过$parse service解析。

    $parse用法: $parse(expression);

  1.      参数:javascript代码片段。
  2.      返回值:{function(context, locals)},表达式编译结果:
    1. context:嵌入表达式执行的作用于scope。
    2. locals:本地变量,常用于替换重写context。
    3. 返回值同样带有assign属性,允许为表达式赋值。

  下面的表达式在angularjs将都是合法的表达式:

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

angularjs表达式vs. javascript表达式

    angularjs视图表达式有点像javascript表达式,但是并不是利用javascript表达式eval()函数解析执行的,与javascript表达式区别如下:

  1. 所有属性都依赖于scope作用于。并不是javascript的全局作用于window。
  2. 表达式计算兼容处理null和undefined,而javascript则会抛出NullPointerExceptions异常。
  3. 没有控制流程语句,条件,循环throw。
  4. 过滤器,多余angularjs表达式计算结果可以通过过滤器转化格式,|表达式,如时间,货币,数字格式等。

   注: 对于angularjs表达式,可以采用$eval()方法解析执行。

 

Demo

html:

 


  1. <!doctype html> 
  2.  
  3. <html ng-app> 
  4.  
  5. <head> 
  6.  
  7. <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script> 
  8.  
  9. <script src="script.js"></script> 
  10.  
  11. </head> 
  12.  
  13. <body> 
  14.  
  15. <div ng-controller="Cntl2" class="expressions"> 
  16.  
  17. Expression:  
  18.  
  19. <input type='text' ng-model="expr" size="80"/> 
  20.  
  21. <button ng-click="addExp(expr)">Evaluate</button> 
  22.  
  23. <ul> 
  24.  
  25. <li ng-repeat="expr in exprs"> 
  26.  
  27. <a href="" ng-click="removeExp($index)">X</a> ]  
  28.  
  29. <tt>`expr`</tt> =&gt; <span ng-bind="$parent.$eval(expr)"></span> 
  30.  
  31. </li> 
  32.  
  33. </ul> 
  34.  
  35. </div> 
  36.  
  37. </body> 
  38.  
  39. </html> 
  40.  

js:


  1. function Cntl2($scope) {  
  2.  
  3. var exprs = $scope.exprs = [];  
  4.  
  5. $scope.expr = '3*10|currency';  
  6.  
  7. $scope.addExp = function(expr) {  
  8.  
  9. exprs.push(expr);  
  10.  
  11. };  
  12.  

 

$scope.removeExp = function(index) {

exprs.splice(index, 1);

};

}

jsfiddle演示:http://jsfiddle.net/whitewolf/yduLt/1/

属性执行

     angularjs所有的表达式执行都将依赖于一个作用于scope,不同于javascript的window全局作用域.如果你想引用全局作用于window,这必须依赖于上节的DI特性中引用$window service. 实例如下:

html:


  1. <!doctype html> 
  2.  
  3. <html ng-app> 
  4.  
  5. <head> 
  6.  
  7. <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script> 
  8.  
  9. <script src="script.js"></script> 
  10.  
  11. </head> 
  12.  
  13. <body> 
  14.  
  15. <div class="example2" ng-controller="Cntl1"> 
  16.  
  17. Name: <input ng-model="name" type="text"/> 
  18.  
  19. <button ng-click="greet()">Greet</button> 
  20.  
  21. </div> 
  22.  
  23. </body> 
  24.  
  25. </html> 
  26.  

js:


  1. function Cntl1($window, $scope){  
  2.  
  3. $scope.name = 'World';  
  4.  
  5.    
  6.  
  7. $scope.greet = function() {  
  8.  
  9. ($window.mockWindow || $window).alert('Hello ' + $scope.name);  
  10.  
  11. }  
  12.  
  13. }  
  14.  

jsfiddle演示:http://jsfiddle.net/whitewolf/MF2Ku/1/

兼容执行

    如上所述:angularjs表达式计算兼容处理null和undefined不会抛出任何异常,因为这将现实处理在view显示,而javascript则会抛出NullPointerExceptions异常。例如表达式

`a`.`b`.`c`,与其同等效果的javascript代码将是{{((a||{}).b||{}).c}}。 无控制流程

    在angularjs表达式中将不存在条件,循环,throw控制流程语句。因为angularjs作为mvc或者贴近pm模式要求表现层逻辑必须包含在controller中,而不是view,view应该足够的被动。在表达式模式中都尽力将表现层不变的表现逻辑和多样易变的UI view中抽离出来,便于更好的自动化测试构建等。

过滤器(Filters)

    数据仅作为一种持久化存储领域模型(表现层或者确切的成为视图模型viewmodel),当展现给用户的时候很多时候需要更友好的方式,比如时间,数字,货币格式本地化,

例如: name | uppercase , 123 | number:2,3*10|currency。

   filters支持链式写法,如何powershell或者其他操作系统外壳语言一样的管道式模型,形如 value | filter1 | filter2。

 

   其他资源可参考本博客中其他angularjs随笔或者angularjs官方文档http://angularjs.org/




 本文转自 破狼 51CTO博客,原文链接:http://blog.51cto.com/whitewolfblog/990213,如需转载请自行联系原作者


版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章