首先$parse和$compile是Angular.js自带的两个服务。而$eval是scope的一个方法,和$parse类似。
一.$parse
$parse是一个解析表达式的服务,比如你有<h1>{{test}}</h1>,$parse就是帮助你在当前控制器的scope(上下文)去寻找test的值。
$parse官方文档:
var getter = $parse('user.name');
var setter = getter.assign;
var context = {user:{name:'angular'}};
var locals = {user:{name:'local'}};
expect(getter(context)).toEqual('angular'); //true
解析:getter(context)实际上就是$parse('user.name')(context)。
1.获取当前的表达式user.name。
2.获取当前的上下文对象{user:{name:'angular'}}。
3.在上下文对象中寻找表达式,最终获得“angular“这个字符串。
setter(context, 'newValue');
解析:$parse('user.name').assign(context,'newValue');
1.获取当前的表达式user.name
2.获取当前的上下文对象{user:{name:'angular'}}
3.改变表达式中的值,将上下文对象编程{user:{name:'newValue'}}
expect(context.user.name).toEqual('newValue'); //true
expect(getter(context, locals)).toEqual('local'); //true
解析:$parse('user.name')(context,locals);
1.获取当前的表达式user.name。
2.获取当前的上下文对象{user:{name:'angular'}}。
3.覆盖当前的上下文{user:{name:'local'}}。
4.获取解析之后表达式的值。
$eval的源码:
$eval:function(express,environment){
return $parse(express)(this,environment);
}
二.$compile
将一个死模板编程活模板
$compile(模板)(上下文);
它会返回两个函数pre-link和post-link
第一个执行的是pre-link,它对于同一个指令的遍历顺序是从父节点到子节点的遍历,在这个阶段,dom节点还没有稳定下来,无法做一些绑定事件的操作,但是我们可以在这里进行一些初始化数据的处理。
第二个执行的是post-link,也就是我们常说的link函数,他是从子节点到父节点遍历的,在这个阶段,DOM节点已经稳定下来了,我们一般会在这里进行很多的操作。
参考原文文章:https://www.cnblogs.com/HeJason/p/5493357.html