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)进行设置,这里就不一一陈述。