$ parse,$ interpolate和$ compile服务有什么区别?

$parse$interpolate$compile服务有什么区别? 对我来说,他们都做同样的事情:采取模板并将其编译为模板函数。

这些都是帮助AngularJS视图渲染的服务的例子(尽pipe$parse$interpolate可以在这个域之外使用)。 为了说明每个服务的作用,我们来看一下这段HTML:

 var imgHtml = '<img ng-src="/path/{{name}}.{{extension}}">' 

并在范围上的值:

 $scope.name = 'image'; $scope.extension = 'jpg'; 

鉴于这个标记这里是每个服务带来的表格:

  • $compile – 它可以把整个标记,并把它变成一个链接function,当在一定范围内执行时,将一段HTML文本转换为dynamic,活动的DOM与所有的指令(这里: ng-src )反应模型变化。 我们可以像下面这样调用它:$ compile(imgHtml)($ scope),并得到一个包含所有DOM事件边界的DOM元素。 $compile是利用$interpolate (等等)来完成它的工作。
  • $interpolate知道如何处理一个embedded式插值expression式的string,例如:/ /path/{{name}}.{{extension}} . /path/{{name}}.{{extension}} 。 换句话说,它可以使用插值expression式的string,范围并将其转换为结果文本。 可以将$interpolation服务看作一个非常简单的基于string的模板语言。 给出上面的例子,可以使用如下的服务: $interpolate("/path/{{name}}.{{extension}}")($scope)得到path/image.jpgstring。
  • $parse$interpolate用来评估个别expression式( nameextension )。 它可以用来读取设置给定expression式的值。 例如,要评估nameexpression式,可以这样做: $parse('name')($scope)来获得“image”值。 要设置值将做: $parse('name').assign($scope, 'image2')

所有这些服务正在共同合作,在AngularJS中提供一个生动的用户界面。 但是他们在不同的层面上运作:

  • $parse只涉及单个expression式( nameextension )。 这是一个读写服务。
  • $interpolate是只读的,涉及到包含多个expression式的string( /path/{{name}}.{{extension}}
  • $compile是AngularJS机器的核心,可以将HTMLstring(带有指令和插值expression式)转换为实时DOM。
 $interpolate--> Let us say you have two variables assigned to $scope object in the controller, $scope.a = 2; $scope.b = 3; var f = $interpolate("Result is : {{a*b}}"); var result = f($scope); console.log(result); --->'Result is 6' This means that $interpolate can take the string which has one or more angular expressions. Now $parse: var f1 = $parse("a*b"); var result1 = f1($scope); console.log(result1); ----> '6' **So $interpolate has the capability to evaluate a string with angular expressions mixed up in the string against the scope to get the result**. Another important difference between $interpolate and $parse,$eval is: **$interpolate has the capability to work with strings containing filters along with angular expressions.** This feature is not accessible in $eval , $parse. console.log($interpolate("Result is : {{a*b | currency : 'USD$'}}")($scope)); ---> 'Result is USD $6.00' 

$ interpolate没有像$ eval和$ parse那样的对$ scopevariables的写访问权限

$ parse,$ interpolate —>需要被注入,但是$ eval不需要被注入到控制器或者它被使用的地方

$ parse,$ interpolate赋予可以针对任何上下文进行评估的函数,但$ eval总是针对$ scope进行评估。

$ eval和$ interpolate只能在后台使用$ parse。