angular $parse $eval parse VS eval
Notes: parse 和 eval 等service之前都有一个$ 美元符号
parse angular中重要指令介绍( eval, parse和 compile) Advanced Angular: parse
$parse
----------------------------------------------------------------------------------------------------
$parse服务是将一个Angular expression转化为一个函数。
Converts Angular expression into a function.
var getter = $parse('user.name');
var setter = getter.assign;
var context = {user:{name:'angular'}};
var locals = {user:{name:'local'}};
expect(getter(context)).toEqual('angular');
setter(context, 'newValue');
expect(context.user.name).toEqual('newValue');
expect(getter(context, locals)).toEqual('local');
Returns
调用$parse后返回一个函数
function(context, locals)
a function which represents the compiled expression:
- context – {object} – an object against which any expressions embedded in(angular表达式所在的上下文) the strings are evaluated against (typically a scope object).
- locals – {object=} – local variables context object, useful for overriding values in context(locals可以覆盖掉context里面的值).
The returned function also has the following properties:
- literal – {boolean} – whether the expression's top-level node is a JavaScript literal.
- constant – {boolean} – whether the expression is made entirely of JavaScript constant literals.
- assign – {?function(context, value)} – if the expression is assignable, this will be set to a function to change its value on the given context(改变表达式所在的上下文中的值).
----------------------------------------------------------------------------------------------
If you want to step up in your AngularJS knowledge, $parse is one of the most important services that you should know about. It is used in most of the directives, and opens up your imagination to a new set of possibilities.
So, what does it do? Let’s start with a place we all well know: ngClick.
ngClick directive, takes an expression, and executes the expression when the directive element is clicked. So, how does it work internally? Yep, you guessed it: with $parse.
$parse takes an expression, and returns you a function. When you call the returned function with context(带着上下文作为第一个参数) (more on that later) as first argument, it will execute the expression with the given context.
Let’s see it with an example:
function
MyService($parse) {
var
context = {
author: { name:
'Umur'
},
title:
'$parse Service'
,
doSomething:
function
(something) {
alert(something);
}
};
var
parsedAuthorNameFn = $parse(
'author.name'
);
var
parsedTitleFn = $parse(
'title'
);
var
parsedDoSomethingFn = $parse(
'doSomething(author.name)'
);
var
authorName = parsedAuthorNameFn(context);
// = 'Umur'
var
parsedTitle = parsedTitleFn(context);
// = '$parse Service'
var
parsedDoSomething = parsedDoSomethingFn(context);
// shows you an alert 'Umur'
}
So this is very cool, we can evaluate strings with a context safely. Let’s write a very basic myClick directive.
angular.module(
'my-module'
, [])
.directive(
'myClick'
,
function
($parse) {
return
{
link:
function
(scope, elm, attrs) {
var
onClick = $parse(attrs.myClick);
elm.on(
'click'
,
function
(e){
// The event originated outside of angular,
// We need to call $apply
scope.$apply(
function
() {
onClick(scope); // 传递了一个上下文参数
});
});
}
}
});
See, the pure javascript object turns out to the our scope!
This works, but if you look at the docs of ngClick, it lets us to inject $event object to the function. How does that happen? It is because the parsed function accepts an optional second argument for additional context.
在angular的ngClick中,是可以传递$event参数的,我们这里是自定义了一个参数,传递了进去
We have access to event object in the click callback, and we can just pass this through.
angular.module(
'my-module'
, [])
.directive(
'myClick'
,
function
($parse) {
return
{
link:
function
(scope, elm, attrs) {
var
onClick = $parse(attrs.myClick);
elm.on(
'click'
,
function
(e){
// The event originated outside of angular,
// We need to call $apply
scope.$apply(
function
() {
onClick(scope, {$event: e});// 构造了一个自己的$event对象,传递了进去
});
});
}
}
});
If you don’t need to pass additional context, you can save some bytes and remove code of the code. Here is a way to do it cooler. How does it work exercise it left to the reader. Please leave a comment if you think you’ve found the answer!
angular.module(
'my-module'
, [])
.directive(
'myClick'
,
function
($parse) {
return
{
link:
function
(scope, elm, attrs) {
var
onClick = $parse(attrs.myClick);
elm.on(
'click'
,
function
(e) {
scope.$apply(onClick);
});
}
}
});
$eval
Angular.js: How does $eval work and why is it different from vanilla eval?
$eval
and $parse
don't evaluate JavaScript; they evaluate AngularJS expressions.( $eval和 $parse处理的不是js表达式,而是Angular表达式)
The linked documentation explains the differences between expressions and JavaScript.
Q: What exactly is $eval doing? Why does it need its own mini parsing language?
From the docs:
Expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. Expressions are processed by $parse service(内部调用$parse服务).
It's a JavaScript-like mini-language that limits what you can run (e.g. no control flow statements, excepting the ternary operator) as well as adds some AngularJS goodness (e.g. filters).
Q: Why isn't plain old javascript "eval" being used?
Because it's not actually evaluating JavaScript. As the docs say:
If ... you do want to run arbitrary JavaScript code, you should make it a controller method and call the method. If you want to eval() an angular expression from JavaScript, use the $eval() method.
The docs linked to above have a lot more information.
($parse vs $eval)
$parse/$eval和$observe/$watch如何区分
$parse和$eval
首先,$parse跟$eval都是用来解析表达式的, 但是$parse是作为一个单独的服务存在的。$eval是作为scope的方法来使用的。
$parse典型的使用是放在设置字符串表达式映射在真实对象上的值。也可以从$parse上直接获取到表达式对应的值。
var getter = $parse('user.name');
var setter = getter.assign;
setter(scope, 'new name');
getter(context, locals) // 传入作用域,返回值
setter(scope,'new name') // 修改映射在scope上的属性的值为‘new value’
$eval 即scope.$eval,是执行当前作用域下的表达式,如:scope.$eval('a+b'); 而这个里的a,b是来自 scope = {a: 2, b:3};
看看源码它的实现是
$eval: function(expr, locals) {
return $parse(expr)(this, locals);
},
可以找到它也是基于$parse,不过它的参数已经被固定为this,就是当前的scope,所以$eval只是在$parse基础上的封装而已,是一种$parse快捷的API。
angular $parse $eval parse VS eval的更多相关文章
- AngularJS $eval $parse
$eval $parse都可以解析或计算Angular表达式的值. 一.$parse 是一个独立的可以注入的服务,注入就可以使用,它返回一个函数,我们需要显式将表达式求值的上下文传递给该函数.$par ...
- JSON.parse与eval的区别
JSON.parse与eval和能将一个字符串解析成一个JSON对象,但还是有挺大区别. 测试代码 var A = "{ a: 1 , b : 'hello' }"; var B ...
- JSON.parse和eval的区别
JSON.parse和eval的区别 JSON(JavaScript Object Notation)是一种轻量级的数据格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是Jav ...
- 浅谈AngularJS中的$parse和$eval
AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. 总的来说,$parse和$eval都是作用于Ang ...
- JSON.stringify()、JSON.parse()和eval(string)
1.JSON.stringify()用于从一个对象解析出字符串,eg: var obj = {"name":"奔跑的蜗牛","age":&q ...
- 用JSON.parse和eval出现的问题
json格式非常受欢迎,而解析json的方式通常用JSON.parse()但是eval()方法也可以解析,这两者之间有什么区别呢? JSON.parse()之可以解析json格式的数据,并且会对要解析 ...
- 转;说说AngularJS中的$parse和$eval
说说AngularJS中的$parse和$eval AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. ...
- 转:说说angularjs中的$parse和$eval
说说AngularJS中的$parse和$eval AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. ...
- JSON.parse()和eval()的区别
json格式非常受欢迎,而解析json的方式通常用JSON.parse()但是eval()方法也可以解析,这两者之间有什么区别呢? JSON.parse()之可以解析json格式的数据,并且会对要解析 ...
随机推荐
- STM8S TIM1 PWM初始化设置
#define TIM1_DIV1 (uint16)(1-1) #define TIM1_DIV2 (uint16)(2-1) #define TIM1_DIV4 (uint16)(4-1) #def ...
- [ios2]ios RSA
http://blog.iamzsx.me/show.html?id=155002 http://www.theosoft.net/ http://blog.sina.com.cn/s/blog_5f ...
- GMap学习笔记
GMap学习笔记 1.GMap体系详解 What is the map control (GMapControl)? This is the control which renders the map ...
- AC日记——字典 codevs 4189
4189 字典 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题解 查看运行结果 题目描述 Description 最经,skyzhong得到了 ...
- BAE部署Django项目流程整理
1.首先在BAE上创建一个应用名称并付费2.把应用文件夹git到本地,此时文件夹会多出三个文件app.conf,favicon.ico,index.py3.在应用文件夹内创建本地项目:myblog,并 ...
- Qt-剪切板
ClipBoard 存在的意义 进程间数据共享. 方式 Drag And Drop: clipBoard的拖曳方式 app's ClipBoard 缺点 没有权限管理 在Model View中实现Dr ...
- iOS解析crash日志:
iOS解析crash日志:我们在ios开发中会碰到的很多crash问题,如果Debug调试模式的话,我们可以往往很容易的根据log的输出定位到导致crash的原因,但对于已经上线的应用,或者是rele ...
- [一波低姿势的usaco除草记]
总共花了一个月左右 把一份usaco的总结刷了一遍 应该有一百四十多道题 在此纪念一下 总体来说 发现自己基础不是很稳 基本贪心和一些堆的做法还是有点弱鸡 一些dp还是有点弱 但是数据结构题几乎都可以 ...
- GTK+2.0学习——C指针回顾
工作需要,开始做GTK,但是很久没碰C了,来捡一下C的精华. 一.*和&的意义 *:指针运算符 &:取地址运算符 两者优先级一样,从右向左方向结合 二.指针和指针变量 指针:一个变量的 ...
- Nuget 学习三
后期管理: 登录 nuget 官网 https://www.nuget.org/ 可以搜索到自己的包: 点击进入,可进一步操作 如果你需要给自己的类型新增其他功能,或者修改之前的bug(反正就是修改代 ...