AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值

学习笔记 2023/01/12 JavaScript

在"AngularJS中自定义有关一个表格的Directive"中自定义了一个有关表格的Direcitve,其表格的表现方式是这样的:

以上,变量colmnmap的值是事先定义在了Scope中的:

return {
restrict: \'E\',
scope: {
columnmap: \'=\',
datasource: \'=\'
},
link:link,
template:template
};


AngularJS中,还有一种运行时给Scope变量赋值的办法,那就是在link函数中使用$parse或$eval方法

在Direcitve的呈现方面和以前一致:

Directive大致是这样:

var tableHelperWithParse = function($parse){
var template = "",
link = function(scope, element, attrs){
var headerCols = [],
tableStart = \'\',
tableEnd = \'
\', table = \'\', visibleProps = [], sortCol = null, sortDir = 1, columnmap = null; $scope.$watchCollection(\'datasource\', render); //运行时赋值columnmap columnmap = scope.$eval(attrs.columnmap); //或者 columnmap = $parse(attrs.columnmap)(); wireEvents(); function rener(){ 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上直接获取到表达式对应的值。

var getter = $parse(\'user.name\'); 
var setter = getter.assign; 
setter(scope, \'new name\');
getter(context, locals) // 传入作用域,返回值
setter(scope,\'new name\') // 修改映射在scope上的属性的值为‘new value\'

$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。

本文地址:https://www.stayed.cn/item/375

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。