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的基本概念与高级编程
May 14 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
koa-router源码学习小结
Sep 07 Javascript
个人小程序接入支付解决方案
May 23 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
MutationObserver在页面水印实现起到的作用详解
Jul 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
python中的__slots__使用示例
2015/02/26 Python
Python学习入门之区块链详解
2017/07/25 Python
详解python3中tkinter知识点
2018/06/21 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
模具专业推荐信
2013/10/30 职场文书
读书心得体会
2013/12/28 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
创先争优活动个人总结
2015/03/04 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技