一:angularjs表达式的解析
angularjs会在运行$digest循环中自动解析表达式,但有时手动解析表达式也是非常用用的.
angularjs通过$parse这个内部服务来进行表达式的运算,这个服务能够访问当前所处的作用于,这个过程允许我们访问定义在$scope上的原始javascript数据和函数.
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div ng-controller="myController"> <p> <input ng-model="expr" type="text" placeholder="表达式值" /> </p> <pre>rrgffyy{{parseValue}}</pre> </div> </body> <script type="text/javascript" src="js/angularJs-1.2.16-min.js" ></script> <script type="text/javascript"> angular.module("myApp",[]) .controller("myController",function($scope,$parse){ $scope.$watch("expr",function(newVal,oldVal,scope){ if(newVal!=oldVal){ //用该表达式设置parseFun var parseFun=$parse("expr"); //获取经过解析后表达式的值 $scope.parseValue=parseFun(scope); } }); }) </script> </html>
这只是单纯的对页面上的angular表达式解析,但是有时候我们想要对一段字符串进行解析,将字符串中的angularjs表达式解析成我们需要的值.如何做呢.
二:解析字符串.
在字符串模版中做表达式的解析,需要在你的对象中注入$interpolate服务.
$interpolate(text,mustHaveExpression,trustedContext)服务是一个可以接受三个参数的字符串.
text(字符串):字符串模板
mustHaveExpression(布尔值):如果这个值是true,当传入的字符串中不含有表达式时会返回null
trustedContext(字符串):angularJs会对已经进行过字符串插值操作的字符串通过$sec.getTrusted()方法严格的上下文转义.
$interpolate服务返回一个函数,用来在特定的上下文中运算表达式.
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div ng-controller="myController"> <p> <input ng-model="name" type="text" placeholder="姓名" /> </p> <pre>{{previewText}}</pre> </div> </body> <script type="text/javascript" src="js/angularJs-1.2.16-min.js" ></script> <script type="text/javascript"> angular.module("myApp",[]) .controller("myController",function($scope,$interpolate){ var strTempl="大家好,我是{{name}}"; $scope.$watch("name",function(name){ if(name){ var template=$interpolate(strTempl); $scope.previewText=template({name:$scope.name}); } }); }); </script> </html>
看看测试:
我们成功的对
var strTempl="大家好,我是{{name}}"
完成了解析.
利用这个原理我们来看一个更复杂一点的例子.
让我们的字符串模板是动态的.
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div ng-controller="myController"> <p> <input ng-model="name" type="text" placeholder="姓名" /> </p> <p> <input ng-model="age" type="text" placeholder="年龄" /> </p> <textarea ng-model="strTempl"></textarea> <pre>{{previewText}}</pre> </div> </body> <script type="text/javascript" src="js/angularJs-1.2.16-min.js" ></script> <script type="text/javascript" > angular.module("myApp",[]) .controller("myController",function($scope,$interpolate){ var strTempl="大家好,我是{{name}}" $scope.$watch("strTempl",function(strTempl){ if(strTempl){ var template=$interpolate(strTempl); $scope.previewText=template({name:$scope.name,age:$scope.age}); } }); }); </script> </html>
测试结果:
按照angularjs的编写规范,这里的字符串解析完全可以提取成一个服务.
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div ng-controller="myController"> <p> <input ng-model="name" type="text" placeholder="姓名" /> </p> <p> <input ng-model="age" type="text" placeholder="年龄" /> </p> <textarea ng-model="strTempl"></textarea> <pre>{{previewText}}</pre> </div> </body> <script type="text/javascript" src="js/angularJs-1.2.16-min.js" ></script> <script type="text/javascript"> angular.module("emailParser",[]) .factory("EmailParser",["$interpolate",function($interpolate){ return { parse:function(text,context){ var template=$interpolate(text); return template(context); } } }]); angular.module("myApp",["emailParser"]) .controller("myController",["$scope","EmailParser",function($scope,EmailParser){ $scope.$watch("strTempl",function(body){ if(body){ $scope.previewText=EmailParser.parse(body,{name:$scope.name,age:$scope.age}); } }); }]); </script> </html>
三.修改表达式的表示符
angularjs默认的表达式表示方法是:{{name}},双括号.
我现在要改成这样的.#{name};
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div ng-controller="myController"> <p> <input ng-model="name" type="text" placeholder="姓名" /> </p> <p> <input ng-model="age" type="text" placeholder="年龄" /> </p> <textarea ng-model="strTempl"></textarea> <pre>#{previewText}</pre> </div> </body> <script type="text/javascript" src="js/angularJs-1.2.16-min.js" ></script> <script type="text/javascript"> angular.module("emailParser",[]) .config(["$interpolateProvider",function($interpolateProvider){ $interpolateProvider.startSymbol("#{"); $interpolateProvider.endSymbol("}"); }]) .factory("EmailParser",["$interpolate",function($interpolate){ return { parse:function(text,context){ var template=$interpolate(text); return template(context); } } }]); angular.module("myApp",["emailParser"]) .controller("myController",["$scope","EmailParser",function($scope,EmailParser){ $scope.$watch("strTempl",function(body){ if(body){ $scope.previewText=EmailParser.parse(body,{name:$scope.name,age:$scope.age}); } }); }]); </script> </html>
测试结果:
