说说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 相关文章推荐
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
Three.js实现雪糕地球的使用示例详解
Jul 07 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 正则表达式的学习探讨
2013/06/06 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
python中pop()函数的语法与实例
2020/12/01 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
会计出纳员的自我评价
2014/01/15 职场文书
员工拓展培训方案
2014/02/15 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
代办出身证明书
2014/10/21 职场文书
师德承诺书2015
2015/04/28 职场文书
用人单位聘用意向书
2015/05/11 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers