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 相关文章推荐
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
javascript中setInterval的用法
Jul 19 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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安全编程之加密功能
2006/10/09 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
js资料toString 方法
2007/03/13 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
vant 中van-list的用法说明
2020/11/11 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python遍历numpy数组的实例
2018/04/04 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
工作个人的自我评价
2014/01/14 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
新学期感想
2015/08/10 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python