说说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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
JavaScript 数组详解
Oct 10 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
用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 选项及相关信息函数库
2006/12/04 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
中秋节超市促销方案
2014/01/30 职场文书
文明餐桌活动方案
2014/02/11 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
班级标语大全
2014/06/21 职场文书
中秋客户感谢信
2015/01/22 职场文书
居住证明范文
2015/06/17 职场文书
学习经验交流会总结
2015/11/02 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
只用Python就可以制作的简单词云
2021/06/07 Python
python读取mnist数据集方法案例详解
2021/09/04 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
Java中的继承、多态以及封装
2022/04/11 Java/Android