说说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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
微信小程序实现滑动删除效果
May 19 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
jquery对dom的操作常用方法整理
2013/06/25 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
面试常见的js算法题
2017/03/23 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
浅谈Python黑帽子取代netcat
2018/02/10 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
python实现控制COM口的示例
2019/07/03 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
python speech模块的使用方法
2020/09/09 Python
Django日志及中间件模块应用案例
2020/09/10 Python
python 获取字典键值对的实现
2020/11/12 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
煤矿班组长竞聘书
2014/03/31 职场文书
承诺书样本
2014/08/30 职场文书
北京青年观后感
2015/06/15 职场文书
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
mysql数据库隔离级别详解
2022/06/16 MySQL
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript