$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 thepath/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 thename
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屋!