说说AngularJS中的$parse和$eval的用法


Posted in Javascript onSeptember 14, 2017

AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval。

总的来说,$parse和$eval都是作用于AngularJS的表达式。

什么是表达式?

AngularJS中的表达式就是一些类似于JavaScript代码的代码片段(但是它们和JavaScript代码有不尽相同)。表达式通常被用来防止在绑定中,例如{{expression}}。下面是一个例子:

1 + 2 = {{ 1 + 2 }}

或者:

My name is {{ user.name }} 

$parse服务

$parse服务可以讲一个表达式转换为一个函数。这个函数可以被调用,其中的参数是一个上下文对象,通常来说是作用域。

另外,通过$parse的表达式返回的这个函数有一个assign属性。这个assign属性也是一个函数,它可以用来在给定的上下文中改变这个表达式的值。

下面是一段简单的代码:

<div my-attr="obj.name" my-directive>testing</div>
app.directive('myDirective',function($log,$parse){
  return function(scope,elem,attrs){
    //解析"my-attr属性值到一个函数中"
    var model = $parse(attrs.myAttr);
    //model现在是一个函数,可以调用它来获取表达式的值
    //下面这行代码将会输出作用域中obj.name的值 
    $log.log(model(scope));

    elem.bind('click',function(){
    //'model.assign'也是一个函数,它用来更新表达式的值 
    model.assign(scope,'New name');
    scope.$apply();
    })
  }
});

上面的例子可以充分体现我们为什么需要$parse服务。如果属性值是name,那么我们完全可以不用$parse,只用scope[attrs.myAttr]即可。但是在上面的例子中,方括号并不管用。

$eval服务

$eval是一个作用域scope中的方法,它将会在当前作用域中执行一个表达式并返回结果:

scope.a = 1;
scope.b = 2;

scope.$eval('a+b'); // 3

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 #Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 #Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 #Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 #Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 #Javascript
基于node.js express mvc轻量级框架实践
Sep 14 #Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 #Javascript
You might like
php与php MySQL 之间的关系
2009/07/17 PHP
php简单复制文件的方法
2016/05/09 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Tesserocr库的正确安装方式
2018/10/19 Python
python配置文件写入过程详解
2019/10/19 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
2014年行政部工作总结
2014/11/19 职场文书
停课通知书
2015/04/24 职场文书
关于幸福的感言
2015/08/03 职场文书
公司保洁员管理制度
2015/08/04 职场文书