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代码的19条指南
Mar 19 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 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操作类及用法实例
2014/12/12 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python数据结构之翻转链表
2017/02/25 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Python中函数参数匹配模型详解
2019/06/09 Python
监考失职检讨书
2015/01/26 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
Win11开始菜单添加休眠选项
2022/04/19 数码科技
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL
js作用域及作用域链工作引擎
2022/07/07 Javascript