Question

$parse，$interpolate和$compile服务有何区别？对我来说，他们都做同样的事情：拿模板并将其编译为模板函数。

Answer 1

这些都是有助于AngularJS视图呈现的服务示例（尽管可以在此域之外使用$parse和$interpolate）。为了说明每个服务的作用，我们以这个HTML为例：

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

和范围内的值：

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

鉴于此标记，这是每个服务带来的内容：

$compile - 它可以占用整个标记并将其转换为链接函数，当针对特定范围执行时，会将一段HTML文本转换为带有所有指令的动态DOM（此处：{ {1}}）对模型变化做出反应。可以按如下方式调用它：$ compile（imgHtml）（$ scope）并获得一个带有所有DOM事件边界的DOM元素。 ng-src正在利用$compile（以及其他事项）来完成其工作。
$interpolate知道如何使用嵌入式插值表达式处理字符串，例如：$interpolate。换句话说，它可以采用带有插值表达式的字符串，范围并将其转换为结果文本。可以将/path/{{name}}.{{extension}}服务视为一种非常简单的基于字符串的模板语言。鉴于以上示例，我们将使用此服务：$interpolation来获取$interpolate("/path/{{name}}.{{extension}}")($scope)字符串。

path/image.jpg

$parse

$interpolate

name

读取

set

extension

name

$parse('name')($scope)

所有这些服务正在共同提供AngularJS中的实时UI。但它们的运作方式不同：

$parse('name').assign($scope, 'image2')仅关注个别表达（$parse，name）。它是一种读写服务。
extension是只读的，关注包含多个表达式的字符串（$interpolate）
/path/{{name}}.{{extension}}是AngularJS机制的核心，可以将HTML字符串（带有指令和插值表达式）转换为实时DOM。

Answer 2

$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没有$ scope变量的写访问权，因为我们在$ eval和$ parse

$ parse，$ interpolate ---＆gt;需要注入，但$ eval不需要注入控制器或使用它

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

$ eval和$ interpolate幕后只使用$ parse。

Answer 3

这是可爱的解释。

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.

$ parse，$ interpolate和$ compile服务有什么区别？

3 个答案: