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 相关文章推荐
非常好的js代码
Jun 27 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
vue实现简单瀑布流布局
May 28 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 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对现有搜索引擎的调用
2013/06/25 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
js性能优化技巧
2015/11/29 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
用python实现对比两张图片的不同
2018/02/05 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
成教自我鉴定
2013/10/27 职场文书
新员工欢迎词
2014/01/12 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
奠基仪式策划方案
2014/05/15 职场文书
申报材料格式
2014/12/30 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
node快速搭建后台的实现步骤
2022/02/18 NodeJs
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers