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的deferred对象使用详解
Aug 20 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
$.extend 的一个小问题
Jun 18 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 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
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php中session与cookie的比较
2015/01/27 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
js性能优化技巧
2015/11/29 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python3计算三角形的面积代码
2017/12/18 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
python 字符串格式化的示例
2020/09/21 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
2015年司法所工作总结
2015/04/27 职场文书
安全教育第一课观后感
2015/06/17 职场文书
消防安全主题班会
2015/08/12 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
Sql Server之数据类型详解
2022/02/28 SQL Server
Python matplotlib多个子图绘制整合
2022/04/13 Python