Angular之表达式

表达式

  用{{ }}符号将一个变量绑定到$scope上的写法就是一个表达式:{{ expression }},表达式和eval(javascript)非常相似,但是Angular处理表达式的不同特征如下:

  • 所有表达式都在起所属的作用域内部执行,并由访问本地$scope的权限;
  • 如果表达式发生了TypeError和ReferenceError并不会抛出异常。
  • 不允许使用任何流程控制功能(如条件控制:if/else)。
  • 可以接受过滤器和过滤器链

解析表达式($parse服务)

  AngularJS会在运行$digest循环的过程中自动解析表达式,同时支持我们自己手动解析表达式。

  AngularJS通过$parse内部服务进行表达式的运算,这个服务能够访问当前所处的作用域。这个过程允许我们访问定义在$scope上的原始Javascript数据和函数。

<!doctype html>
<html>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 
    </head>
   <body>
    <div ng-app="myApp">
        <div ng-controller="mycontroler">
            <input ng-model="expr" type='text' placeholder="写入表达式" />
             <h1>表达式结果: {{ parseValue }}!</h1>
        </div>
     
    </div>
    <script type="text/javascript" src="controller.js"></script>
  </body>
</html>
 var app=angular.module("myApp",[]);
 app.controller("mycontroler",function($scope,$parse){
     $scope.$watch('expr',function(newVal,oldVal,scope){
         if(newVal!==oldVal){
             var parseFun=$parse(newVal);
             $scope.parseValue=parseFun(scope);
         }
     })     
 })

插值字符串($interpolate)

$interpolate服务返回一个函数,用来在特定的上下文中运算表达式(即表达式可以在客户端自定义的方式)

<!doctype html>
<html>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 
    </head>
   <body>
    <div ng-app="myApp">
        <div ng-controller="mycontroler">
             

<input ng-model='mail' type='text'  />
<textarea ng-model='mailbody' ></textarea>

             <h1>邮件内容: {{ previewText }}!</h1>
        </div>
     
    </div>
    <script type="text/javascript" src="controller.js"></script>
  </body>
</html>
 var app=angular.module("myApp",[]);
 app.controller("mycontroler",function($scope,$interpolate){
     $scope.$watch("mailbody",function(body){
         if(body){
             var temp=$interpolate(body);
             $scope.previewText=temp({mail:$scope.mail})
         }
     })
 })

$interpolate 可以通过config的方式进行 起始(startSymbol)、结束(endSymbol)进行设置,这里就不一一陈述。

posted @ 2016-05-17 20:28  2阳  阅读(1007)  评论(0编辑  收藏  举报