说说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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
Vue组件基础用法详解
Feb 05 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
js实现列表按字母排序
Aug 11 Javascript
JS+CSS实现过渡特效
Jan 02 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
php牛逼的面试题分享
2013/01/18 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
python简单实现刷新智联简历
2016/03/30 Python
python下载图片实现方法(超简单)
2017/07/21 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
数控专业个人求职信范文
2014/02/05 职场文书
对公司合理化的建议书
2014/03/12 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
教师个人总结范文
2015/02/11 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
JavaScript实现音乐播放器
2022/08/14 Javascript