• 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 [ <href="" ng-click="removeExp($index)">X</a> ]
    28 
    29 <tt>{{expr}}</tt> => <span ng-bind="$parent.$eval(expr)"></span>
    30 
    31 </li>
    32 
    33 </ul>
    34 
    35 </div>
    36 
    37 </body>
    38 
    39 </html>

     

    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 
    13  
    14 
    15 $scope.removeExp = function(index) {
    16 
    17 exprs.splice(index, 1);
    18 
    19 };
    20 
    21 }
    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>

    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 }

     

    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/

  • 相关阅读:
    【LeetCode-位运算】汉明距离总和
    python类的继承和重写
    单元测试unittest使用说明
    Java学习90
    Java学习89
    Java学习88
    Java学习87
    Java学习86
    Java学习85
    Java学习84
  • 原文地址:https://www.cnblogs.com/whitewolf/p/2684186.html
Copyright © 2020-2023  润新知