Angular - - $interpolate 和 $parse
$interpolate
将一个字符串编译成一个插值函数。HTML编译服务使用这个服务完成数据绑定。
使用:$interpolate(text,[mustHaveExpression],[trustedContext],[allOrNothing]);
text:需要被编译的字符串。
mustHaveExpression:boolean,如果为true,那么text必须含有嵌入其中的表达式,不然将会返回null,而不是预期的interpolate function,默认为false。
trustedContext:string,如果这个参数被提供,那么在返回相应的函数之前会使用$sce.getTrusted(interpolatedResult, trustedContext)对返回的结果做处理。
$interpolate带有一个可选的第四个参数,allOrNothing。如果allOrNothing为true,插值函数将会返回未定义除非所有嵌入表达式的计算结果不为undefined。
使用代码:
<div ng-app="Demo" ng-controller="testCtrl as ctrl">
<input ng-model="ctrl.text" />{{ctrl.value}}
</div>

(function(){
angular.module('Demo', [])
.controller('testCtrl',["$interpolate","$scope",testCtrl]);
function testCtrl($interpolate,$scope) {
var vm = this;
var obj = { value: "Hello" };
vm.text = "World";
$scope.$watch("ctrl.text",function(n,o){
var interpolate = $interpolate("{{value}} " + n);
vm.value = interpolate(obj);
})
}
}());

$parse
将Angular表达式转换为函数。
使用:$parse(expression);
expression:被编译的表达式。
返回:表示表达式编译后的函数。function(context,locals)
context:对象,含有需要解析的语句中的表达式(通常是一个scope对象)。
locals:对象,局部变量的上下文对象,用于重写上下文中的值。
属性:
literal:boolean,表达式的顶节点是否是一个javascript字面量。
constant:boolean, 表达式是否全部是由javascript的常量字面量组成。
assign:function(context,locals),可以用来在给定的上下文中修改表达式的值。
使用代码:
<div ng-app="Demo" ng-controller="testCtrl as ctrl">
{{ctrl.ParsedValue}}
</div>

(function(){
angular.module('Demo', [])
.controller('testCtrl',["$parse",testCtrl]);
function testCtrl($parse) {
var vm = this;
var context = {
add: function (a, b) { return a + b; },
mul: function (a, b) { return a * b }
};
var data = {a: 2, b: 3, c: 4};
vm.value = context.mul(data.a,context.add(data.b,data.c));// 平常的函数嵌套调用 2*(3+4) = 14
var expression = "mul(a, add(b, c))";// 表达式,将被转换为函数
vm.ParsedValue = $parse(expression)(context, data); //执行上一句的函数 2*(3+4) = 14
}
}());

完事 -。- 这两个破东西也是在google找了好多的资料,选了些较容易区分和说明具体意义的代码,写出来运行运行.... 遇到比较少见少用的api,真TM心累啊,资料难找,理解也不是这么容易... 然后写了好多代码运行,也跑了遍源码,终于是知道了大概是个啥意思了...
Angular - - $interpolate 和 $parse的更多相关文章
- AngularJs $interpolate 和 $parse
$interpolate 将一个字符串编译成一个插值函数.HTML编译服务使用这个服务完成数据绑定. 使用:$interpolate(text,[mustHaveExpression],[truste ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- angularjs之表达式
一:angularjs表达式的解析 angularjs会在运行$digest循环中自动解析表达式,但有时手动解析表达式也是非常用用的. angularjs通过$parse这个内部服务来进行表达式的运算 ...
- $parse , $interpolate ,$complie , $destroy
$parse 是angular 提供的javascript解析器 . var getter = $parse(expression); var setter = getter.assign; cont ...
- angularjs字符串插值($interpolate)
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- AngularJS 插值字符串 $interpolate
定义: $interpolate:编译一段带有嵌入标记的语句,然后返回一个interpolate(插值)函数.使用: $interpolate(text,[mustHaveException],[tr ...
- JSON.parse()和JSON.stringify()
1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23&q ...
- Convert.ToInt32()、int.Parse()和(int)三者的区别
Convert.ToInt32将object类类型转换成int类型,如Convert.ToInt32(session["shuzi"]); (int)适合简单数据类型之间的转换: ...
- JSON.stringify()与JSON.parse()
JSON.stringify()用于把一个对象解析成字符串,如 var student = { age: 23, name: 'wang' } JSON.stringify(student); 结果: ...
随机推荐
- android4.0下如何判断手机是否有底部物理按键(menu物理按键)
某些手机底部是在触摸屏内部有软按键,就是如(back,home,menu 等)而有的手机底部(非屏幕内部)有物理按键,就是生产厂商不愿意有google自带的虚拟按键,而做的电容式的物理按键,如(bac ...
- read gc log
http://www.aichengxu.com/article/Java/18368_2.html https://blogs.oracle.com/poonam/entry/understandi ...
- STM8不用手动复位进入自带Bootloader方法(串口下载)
源:STM8不用手动复位进入自带Bootloader方法(串口下载) STM8不用手动复位进入自带Bootloader方法(串口下载)除非STM8片子的空的,如果复位运行的是自带Bootloader, ...
- Sencha Touch学习(一)
一.Ext的内部类结构示意图 基类Ext.Base 该类是所有通过Ext.define定义出来的类的基类. 是所有Ext类的基石. 来自为知笔记(Wiz)
- 移动web开发资源大整合
移动web开发资源大整合 http://www.cnblogs.com/PeunZhang/p/3407453.html
- A/C模式 是什么意思啊汽车知识问题_PCauto快问
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- java开发之提高java和mysql代码性能和质量
0.if嵌套的层数最好不要超过3层 点击(此处)折叠或打开 import java.util.HashMap; import java.util.Map; public class Qiantao { ...
- Sping--自动装配(byname, bytype)
UserDAOImpl.java: package com.bjsxt.dao.impl; import com.bjsxt.dao.UserDAO; import com.bjsxt.model.U ...
- 产品需求文档写作方法(三)用例文档(UML用例图、流程图)
在产品和技术领域里都有UML的技能知识,而对于产品人员的UML则更多的是指用例图,也就是我所称呼的用户流程图.在讲PRD文档写作的第二篇文章里,我提到了用户流程图的制作,实际上用户流程图是我在产品规则 ...
- 三、MapReduce学习
MapReducer是一种编程模型,用于大规模数据集(大于1TB)的并行运算.概念"Map(映射)"和"Reduce(化简)" ...