$parse、 $interpolate 和 $coding 服务之间的区别是什么？

$parse、 $interpolate和 $compile服务之间的区别是什么？ 对我来说，他们都做同样的事情: 获取模板并将其编译为 template-function。

47531 次浏览
小开
最佳答案

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

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

范围和价值:

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

这里给出的标记是每个服务带来的结果:

  • $compile-它可以将整个标记转换成一个链接函数，当在一定范围内执行时，会将一段 HTML 文本转换成动态的，带有所有指令(这里是 ng-src)的实时 DOM 来响应模型更改。我们可以按照以下方式调用它: $edit (imgHtml)($scope) ，并得到一个包含所有 DOM 事件界限的 DOM 元素。$compile正在利用 $interpolate(以及其他一些东西)来完成它的工作。
  • $interpolate知道如何处理具有嵌入式插值表达式的字符串，例如: /path/\{\{name}}.\{\{extension}}。换句话说，它可以获取一个带有插值表达式的字符串、一个作用域并将其转换为结果文本。可以将 $interpolation服务看作是一种非常简单的、基于字符串的模板语言。根据上面的例子，我们可以使用这样的服务: $interpolate("/path/\{\{name}}.\{\{extension}}")($scope)来获得 path/image.jpg字符串。
  • $interpolate使用 $parse根据作用域计算单个表达式(name、 extension)。它可以用于给定表达式的 读和 准备好了值。例如，要计算 name表达式，需要执行以下操作: $parse('name')($scope)以获得“ image”值。要设置值，需要做的事情是: $parse('name').assign($scope, 'image2')

所有这些服务在 AngularJS 中一起工作，提供了一个实时的用户界面。但是它们在不同的层次上运行:

  • $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 和 $在幕后插入仅使用 $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.

提交答案