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


Answers:


464

这些都是服务的所有例子,援助在AngularJS视图呈现(虽然$parse$interpolate可以使用该结构域之外)。为了说明每个服务的作用,让我们以这段HTML为例:

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

和范围上的值:

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

鉴于此标记,这里是每个服务带到表中的内容:

  • $compile-它可以采用整个标记并将其转换为链接功能,当在特定范围内执行该链接功能时,会将一段HTML文本转换为动态,实时的DOM,并且所有指令(在此处ng-src:)对模型更改做出反应。可以这样调用它:$ compile(imgHtml)($ scope)并得到一个带有所有DOM事件范围的DOM元素。$compile正在利用$interpolate(除其他事项外)完成工作。
  • $interpolate知道如何使用嵌入式插值表达式处理字符串,例如:/path/{{name}}.{{extension}}。换句话说,它可以使用带有插值表达式的字符串,范围并将其转换为结果文本。可以将$interpolation服务视为一种非常简单的基于字符串的模板语言。给定上面的示例,可以使用此服务,例如:$interpolate("/path/{{name}}.{{extension}}")($scope)获得path/image.jpg字符串作为结果。
  • $parse用于通过$interpolate评估个体式(nameextension对一个范围)。它可用于读取设置给定表达式的值。例如,要评估name表达式,可以这样做:$parse('name')($scope)获得“图像”值。要设置值,可以这样做:$parse('name').assign($scope, 'image2')

所有这些服务正在共同努力,以在AngularJS中提供实时UI。但是它们在不同的级别上运行:

  • $parse仅与单个表达式(nameextension)有关。它是一种读写服务。
  • $interpolate是只读的,并且涉及包含多个表达式(/path/{{name}}.{{extension}})的字符串
  • $compile 是AngularJS机制的核心,可以将HTML字符串(带有指令和插值表达式)转换为实时DOM。

11
很好解释。投票了!:)
AlwaysALearner

2
真好 您能否提供每个示例用法和结果的示例?对我来说仍然不是100%清楚,我认为这会很有帮助。谢谢!
AlejandroGarcíaIglesias 2014年

2
确实很棒。在这里,您可以找到更多现实生活中的用法示例(这也是一篇有关加速Angular的很好的简单文章): speeding-up-angular-js-with-simple-optimizations “例如,而不是呈现全局导航使用ng-repeat,我们可以使用$ interpolate提供程序创建自己的导航,以针对对象渲染模板并将其转换为DOM节点。”
Nadav Lebovitch 2014年

很好的解释。我一直在搜索$interpolateAnjularJS中实际存在的所有内容,最后我得到了一个紧凑而内容丰富的答案。
Damith 2015年

示例已如此有效地用于解释所有三个服务对象。我们需要在angular js的各个领域中进行更多此类清晰,基本的解释,以使其对初学者更易上手。
国王

3
$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'

与我们在$ eval和$ parse中一样,$ interpolate对$ scope变量没有写访问权限

$ parse,$ interpolate --->需要注入,但不必在控制器中或使用它的位置注入$ eval

$ parse,$ interpolate给出了可以针对任何上下文进行评估的函数,但是$ eval始终针对$ scope进行评估。

$ eval和$ interpolate在幕后仅使用$ parse。


0

这是可爱的解释。

var img = img/{{name}}.{{extension}}

$parse - > (name,extension) = > vimal , .jpg
$interpolate -> use angular $parse and convert into string -> img/vimal.jpg
$compile -> can turn html string img/vimal.jpg into live DOM so new img tag will be added inside our DOM with all prototype that a img tag have.
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.