说说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 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
js电话号码验证方法
Sep 28 Javascript
js全选按钮的实现方法
Nov 17 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
React中的refs的使用教程
Feb 13 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
Angular脚手架开发的实现步骤
Apr 09 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
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
老生常谈js中的MVC
2017/07/25 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python write无法写入文件的解决方法
2019/01/23 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Pygame的程序开始示例代码
2020/05/07 Python
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
赤壁观后感(2)
2015/06/15 职场文书
道士塔读书笔记
2015/06/30 职场文书
四则混合运算教学反思
2016/02/23 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
Redis RDB技术底层原理详解
2021/09/04 Redis