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

IT技术 javascript angularjs angular-services
2021-03-05 10:42:53

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

3个回答

这些都是服务的所有例子,援助在AngularJS视图呈现(虽然$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。
很好的解释。我一直在搜索$interpolateAnjularJS 中实际存在的每个位置,最后我得到了一个简洁而翔实的答案。
2021-04-25 10:42:53
确实优秀。在这里你可以找到更多现实生活使用的例子(这是一篇关于加速 Angular 的很好的简单文章): speeding-up-angular-js-with-simple-optimizations “例如,而不是渲染全局导航使用 ng-repeat,我们可以使用 $interpolate 提供程序创建我们自己的导航,以针对对象呈现我们的模板并将其转换为 DOM 节点。”
2021-05-02 10:42:53
示例已被非常有效地用于解释所有三个服务对象。在 angular js 的各个领域,我们需要更多这种清晰和基本的解释,以使其对初学者更加平易近人。
2021-05-02 10:42:53
很好地解释了。投票!:)
2021-05-16 10:42:53
好的。您能否提供每个示例的用法和结果?我仍然不是 100% 清楚,我认为这会很有帮助。谢谢!
2021-05-18 10:42:53
$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。

这是可爱的解释。

var img = img/{{name}}.{{extension}}

$parse - > (name,extension) = > vimal , .jpg
$interpolate -> use angular $parse and convert into string -> img/vimal.jpg
$compile -> can turn html string img/vimal.jpg into live DOM so new img tag will be added inside our DOM with all prototype that a img tag have.