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


Posted in Javascript onJanuary 25, 2016

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

<table-helper datasource="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-parse datasource="customers" columnmap="[{name: 'Name'},...]"></table-helper-with-parse>

Directive大致是这样:

var tableHelperWithParse = function($parse){
var template = "",
link = function(scope, element, attrs){
var headerCols = [],
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();
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。

Javascript 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 #Javascript
javascript产生随机数方法汇总
Jan 25 #Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 #Javascript
理解JavaScript表单的基础知识
Jan 25 #Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 #Javascript
JavaScript数组的一些奇葩行为
Jan 25 #Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 #Javascript
You might like
php之Memcache学习笔记
2013/06/17 PHP
destoon二次开发入门示例
2014/06/20 PHP
php简单实现快速排序的方法
2015/04/04 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
使用python实现BLAST
2018/02/12 Python
python实现简单登陆流程的方法
2018/04/22 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
python实现取余操作的简单实例
2020/08/16 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
家长通知书教师评语
2014/04/17 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
企业精神口号
2014/06/11 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
2015年少先队活动总结
2015/03/25 职场文书
听证通知书
2015/04/24 职场文书
雨中的树观后感
2015/06/03 职场文书
怒海潜将观后感
2015/06/11 职场文书