$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的更多相关文章

  1. AngularJs $interpolate 和 $parse

    $interpolate 将一个字符串编译成一个插值函数.HTML编译服务使用这个服务完成数据绑定. 使用:$interpolate(text,[mustHaveExpression],[truste ...

  2. angular源码分析:angular中脏活累活的承担者之$interpolate

    一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...

  3. angularjs之表达式

    一:angularjs表达式的解析 angularjs会在运行$digest循环中自动解析表达式,但有时手动解析表达式也是非常用用的. angularjs通过$parse这个内部服务来进行表达式的运算 ...

  4. $parse , $interpolate ,$complie , $destroy

    $parse 是angular 提供的javascript解析器 . var getter = $parse(expression); var setter = getter.assign; cont ...

  5. angularjs字符串插值($interpolate)

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  6. AngularJS 插值字符串 $interpolate

    定义: $interpolate:编译一段带有嵌入标记的语句,然后返回一个interpolate(插值)函数.使用: $interpolate(text,[mustHaveException],[tr ...

  7. JSON.parse()和JSON.stringify()

    1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23&q ...

  8. Convert.ToInt32()、int.Parse()和(int)三者的区别

    Convert.ToInt32将object类类型转换成int类型,如Convert.ToInt32(session["shuzi"]); (int)适合简单数据类型之间的转换: ...

  9. JSON.stringify()与JSON.parse()

    JSON.stringify()用于把一个对象解析成字符串,如 var student = { age: 23, name: 'wang' } JSON.stringify(student); 结果: ...

随机推荐

  1. FusionChart实现柱状图、饼状图的动态数据显示 附Demo

    最近做的项目中需要用饼状图显示——'问卷调查'的统计结果(之前用过FusionChart做过柱状图的数据展示,那还是两年前的事了),在网上查了下FusionChart实现饼状图显示方面的资料,却发现资 ...

  2. [转]使用openssl库实现RSA、AES数据加密

    openssl是可以很方便加密解密的库,可以使用它来对需要在网络中传输的数据加密.可以使用非对称加密:公钥加密,私钥解密.openssl提供了对RSA的支持,但RSA存在计算效率低的问题,所以一般的做 ...

  3. Python 函数简介之一

    面向对象--->对象------>Class 面向过程--->过程------>def 函数式编程--->函数---->def 函数的介绍: def fun1(): ...

  4. C语言5种存储区域

    C语言5种存储区域 转发至:http://www.mamicode.com/info-detail-927635.html 系统为了管理内存 把内存划分了几个区域 1> 栈区 栈区之中的数据在栈 ...

  5. 读书笔记——Java IO

    IO流的典型使用方式 1.缓存输入文件 BufferedReader in=new BufferedReader( new FileReader(文件名字) ); String s; StringBu ...

  6. SQL复习三(子查询)

    子查询 子查询就是嵌套查询,即select中包含这select,如果一条语句中存在着两个,或者两个以上的select,那么就是子查询语句了. 子查询出现的位置 where后,作为条件的一部分: fro ...

  7. Xcode7 免证书真机测试

    Xcode很早就有个免证书测试,今天我自己也测试了一把,还是挺好用的,接下来,我就说一下我的大体过程: 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题 ...

  8. winutils spark windows installation

    http://stackoverflow.com/questions/37305001/winutils-spark-windows-installation

  9. Blog`s CSS

    #div_digg { position: fixed; bottom: 10px; width: 50px; right: 50px; filter: alpha(opacity=20); opac ...

  10. awk简单用法

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...