小编典典

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

all

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


阅读 59

收藏
2022-08-07

共1个答案

小编典典

这些都是帮助 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评估单个表达式 ( name, extension)。它可用于 读取设置 给定表达式的值。例如,要评估name表达式,可以这样做:$parse('name')($scope)获取“图像”值。要设置值,可以这样做:$parse('name').assign($scope, 'image2')

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

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