javascript - $parse、$interpolate 和 $compile 服务有什么区别？

Question

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

Answer 1

这些都是帮助 AngularJS View 渲染的服务示例(尽管 $parse 和 $interpolate 可以在这个域之外使用)。为了说明每个服务的作用，让我们以这段 HTML 为例:

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

范围内的值:

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

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

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

所有这些服务协同工作以在 AngularJS 中提供实时 UI。但它们在不同的层面上运作:

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