程序猿进化日-AngularJS学习之表达式

AngualrJS是一个Javascript的一个框架，极大的简化了javascript的语法，符合现在软件设计模式-MVC（路由-服务），并且通过指令来扩展了HTML，还可以通过自己表达式来绑定数据。接下来，是我学习AngularJS几个月遇到的难点解析。

表达式-$parse

表达式在AngualrJS应用中被广泛的使用，深入理解它是作为开发的关键之一。

首先，我们先构造一个前端代码。写一个text文本框，然后给其绑定一个属性名expr。

{{parsedExpr}}

接下来，我们创建script。我们通过$watch服务，监听我们输入框中的新旧值，其中，当新旧值不同的时候，我们运用$parse服务将新值解析到我们的parseFun函数上，然后通过parseFun函数调用scope对象，这样，我们就可以解析我们输入框中的表达式，达到我们想要的结果。(注意，$parse服务绑定后将表达式解析为一个函数).

.controller('MyController',function($scope,$parse){

$scope.$watch('expr',function(newVal,oldVar,scope){

console.log('newVar'+newVal);

console.log('oldVar'+oldVar);

if(newVal != oldVar){

var parseFun= $parse(newVal);

scope.parsedExpr=parseFun(scope);

}

});

});

});

}]);

总结：AngualrJS 通过$parse服务来进行表达式的运算，这个服务能够访问当前所处的作用域。这个过程中允许我们访问定义在$scope上的原始Javascript的数据与函数。

---

表达式-$interpolate

$interpolate作用非常强大。

例如，在AngualrJS里面，我们可以直接将DOM当做模板来使用，

My name is {{name}}

我们可以直接使用scope在控制器中获取name的值。那么，如果不是在DOM预先生成的情况，而是我们需要将生成的字符串当成模板来进行改变的时候，我们就会用到$interpolate了。

首先，我们创建如下所示的视图，第一个视图代表我们的输入的名称，第二个是一个文本框，代表我们的email的内容，并且各自绑定其属性，最后，通过我们的

标签来查找。
 
 
 
  

 
  

 
  

 
  
{{previewText}}
 
  

 
 
 
 
下面，我们通过script来构建我们的$interpolate。该script中，我们首先将两个text关联的属性给赋值，通过$watch监听我们emailBody里面的值是否有所变化，如果我们的emailBody变化了，那么，我们则会通过$interpolate来通过emailBody的内容作为模板，通过次模板中绑定的属性的{{to}}来对整个scope进行改变。最后将其值赋值给我们的previewText显示出来。
 
 
 
  

 
 
 
 
总结: 从上述的操作上，我们可以在DOM没有规定之前，来对我们事后定义的DOM进行操作，这样，我们就可以直接使用我们位置的模板进行定义赋值了。
 
 
那么，更进一步，如果我们的文件里面包含很多的{{}}，可能使我们绑定的内容导致混淆，所以，我们可以自定义我们认识的表示，这样，我们必须自己重新配置一下系统的$interpolate服务，用startSymbol()方法修改标志开始的符号---startSymbol()修改标识开始的符号，endSymbol修改结束标志的符号。
 
 
如下所示，我们修改previewText。
 
 
__previewText__
 
 
随后，我们通过重写服务的方式:
 
 
 
  
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('emailBody', function(body) {
 
  
if (body) {
 
  
$scope.previewText = EmailParser.parse(body, {
 
  
to: $scope.to
 
  
});
 
  
}
 
  
});
 
  
}]);
 
 
 
 
现在，我们就通过自己修改的"__XXX__"来实现了最终的结果。是不是很cool。