AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
在"AngularJS中自定义有关一个表格的Directive"中自定义了一个有关表格的Direcitve,其表格的表现方式是这样的:
<table-helperdatasource="customers"clumnmap="[{name:'Name'},{street:'Street'},{age:'Age'},{url:'URL',hidden:true}]"></table-helper>
以上,变量colmnmap的值是事先定义在了Scope中的:
return{
restrict:'E',
scope:{
columnmap:'=',
datasource:'='
},
link:link,
template:template
};
AngularJS中,还有一种运行时给Scope变量赋值的办法,那就是在link函数中使用$parse或$eval方法。
在Direcitve的呈现方面和以前一致:
<table-helper-with-parsedatasource="customers"columnmap="[{name:'Name'},...]"></table-helper-with-parse>
Directive大致是这样:
vartableHelperWithParse=function($parse){
vartemplate="",
link=function(scope,element,attrs){
varheaderCols=[],
tableStart='<table>',
tableEnd='</table>',
table='',
visibleProps=[],
sortCol=null,
sortDir=1,
columnmap=null;
$scope.$watchCollection('datasource',render);
//运行时赋值columnmap
columnmap=scope.$eval(attrs.columnmap);
//或者
columnmap=$parse(attrs.columnmap)();
wireEvents();
functionrener(){
if(scope.datasource&&scope.datasourse.length){
table+=tableStart;
table+=renderHeader();
table+=renderRows()+tableEnd;
renderTable();
}
}
};
return{
restrict:'E',
scope:{
datasource:'='
},
link:link,
template:template
}
}
angular.module('direcitvesModule')
.directive('tableHelperWithParse',tableHelperWithParse);
下面给大家介绍下$parse和$eval的不同
首先,$parse跟$eval都是用来解析表达式的,但是$parse是作为一个单独的服务存在的。$eval是作为scope的方法来使用的。
$parse典型的使用是放在设置字符串表达式映射在真实对象上的值。也可以从$parse上直接获取到表达式对应的值。
vargetter=$parse('user.name');
varsetter=getter.assign;
setter(scope,'newname');
getter(context,locals)//传入作用域,返回值
setter(scope,'newname')//修改映射在scope上的属性的值为‘newvalue'
$eval即scope.$eval,是执行当前作用域下的表达式,如:scope.$eval('a+b');而这个里的a,b是来自scope={a:2,b:3};
看看源码它的实现是
$eval:function(expr,locals){
return$parse(expr)(this,locals);
},
可以找到它也是基于$parse,不过它的参数已经被固定为this,就是当前的scope,所以$eval只是在$parse基础上的封装而已,是一种$parse快捷的API。