$parse、$interpolate和$compile服务之间有什么区别?
2022-08-30 01:50:13
和 服务之间有什么区别?对我来说,他们都做同样的事情:获取模板并将其编译为模板功能。$parse
$interpolate
$compile
和 服务之间有什么区别?对我来说,他们都做同样的事情:获取模板并将其编译为模板功能。$parse
$interpolate
$compile
这些都是帮助AngularJS视图渲染的服务示例(尽管并且可以在此域之外使用)。为了说明每个服务的作用是什么,让我们以这段HTML为例:$parse
$interpolate
var imgHtml = '<img ng-src="/path/{{name}}.{{extension}}">'
和作用域上的值:
$scope.name = 'image';
$scope.extension = 'jpg';
给定此标记,以下是每个服务带来的内容:
$compile
- 它可以将整个标记转换为链接函数,当针对某个范围执行时,它将把一段HTML文本转换为动态的,实时的DOM,所有指令(此处:)都对模型更改做出反应。可以按如下方式调用它:$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
extension
name
$parse('name')($scope)
$parse('name').assign($scope, 'image2')
所有这些服务都在协同工作,在AngularJS中提供实时UI。但它们在不同的层面上运作:
$parse
仅与单个表达式有关 (, )。它是一种读写服务。name
extension
$interpolate
是只读的,并且与包含多个表达式 (/path/{{name}}.{{extension}}
)$compile
是AngularJS机制的核心,可以将HTML字符串(带有指令和插值表达式)转换为实时DOM。$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不像我们在$eval和$parse中那样具有对$scope变量的写入权限
$parse,$interpolate --->需要注射,但$eval不需要注射到控制器或使用的地方
$parse,$interpolate给出可以针对任何上下文进行求值的函数,但$eval总是根据$scope进行求值。
$eval和幕后$interpolate仅使用$parse。