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。