$parse、$interpolate 和 $compile 服务之间有什么区别? [英] What is the difference between the $parse, $interpolate and $compile services?

问题描述

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

What is the difference between $parse, $interpolate and $compile services? For me they all do the same thing: take template and compile it to template-function.

推荐答案

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

Those are all examples of services that aid in AngularJS view rendering (although $parse and $interpolate could be used outside of this domain). To illustrate what is the role of each service let's take example of this piece of HTML:

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

和作用域上的值:

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

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

Given this markup here is what each service brings to the table:

• $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')

• $compile - it can take the whole markup and turn it into a linking function that, when executed against a certain scope will turn a piece of HTML text into dynamic, live DOM with all the directives (here: ng-src) reacting to model changes. One would invoke it as follows: $compile(imgHtml)($scope) and would get a DOM element with all the DOM event bounds as a result. $compile is making use of $interpolate (among other things) to do its job.
• $interpolate knows how to process a string with embedded interpolation expressions, ex.: /path/{{name}}.{{extension}}. In other words it can take a string with interpolation expressions, a scope and turn it into the resulting text. One can think of the $interpolation service as a very simple, string-based template language. Given the above example one would use this service like: $interpolate("/path/{{name}}.{{extension}}")($scope) to get the path/image.jpg string as a result.
• $parse is used by $interpolate to evaluate individual expressions (name, extension) against a scope. It can be used to both read and set values for a given expression. For example, to evaluate the name expression one would do: $parse('name')($scope) to get the "image" value. To set the value one would do: $parse('name').assign($scope, 'image2')

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

All those services are working together to provide a live UI in AngularJS. But they operate on different levels:

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

• $parse is concerned with individual expressions only (name, extension). It is a read-write service.
• $interpolate is read only and is concerned with strings containing multiple expressions (/path/{{name}}.{{extension}})
• $compile is at the heart of AngularJS machinery and can turn HTML strings (with directives and interpolation expressions) into live DOM.

这篇关于$parse、$interpolate 和 $compile 服务之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！