Sự khác biệt giữa các dịch vụ $ parse, $ interpolate và $ compile là gì?

Sự khác nhau giữa là gì $parse, $interpolatevà $compiledịch vụ? Đối với tôi tất cả đều làm điều tương tự: lấy mẫu và biên dịch nó thành hàm mẫu.

Đó là tất cả các ví dụ về các dịch vụ hỗ trợ hiển thị chế độ xem AngularJS (mặc dù $parsevà $interpolatecó thể được sử dụng bên ngoài miền này). Để minh họa vai trò của mỗi dịch vụ, hãy lấy ví dụ về đoạn HTML này:

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

và các giá trị trên phạm vi:

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

Đưa ra đánh dấu này ở đây là những gì mỗi dịch vụ mang đến cho bảng:

• $compile- nó có thể lấy toàn bộ đánh dấu và biến nó thành một hàm liên kết, khi được thực thi theo một phạm vi nhất định sẽ biến một đoạn văn bản HTML thành động, DOM sống với tất cả các lệnh (ở đây ng-src:) phản ứng với các thay đổi của mô hình. Người ta sẽ gọi nó như sau: $ compile (imgHtml) ($ scope) và kết quả sẽ nhận được một phần tử DOM với tất cả các giới hạn sự kiện DOM. $compileđang tận dụng $interpolate(trong số những thứ khác) để thực hiện công việc của mình.
• $interpolatebiết cách xử lý một chuỗi với các biểu thức nội suy nhúng, ví dụ : /path/{{name}}.{{extension}}. Nói cách khác, nó có thể lấy một chuỗi với các biểu thức nội suy, một phạm vi và biến nó thành văn bản kết quả. Người ta có thể nghĩ về $interpolationdịch vụ như một ngôn ngữ mẫu dựa trên chuỗi rất đơn giản. Cho ví dụ trên, người ta sẽ sử dụng dịch vụ này như sau: $interpolate("/path/{{name}}.{{extension}}")($scope)để lấy path/image.jpgchuỗi kết quả.
• $parseđược sử dụng $interpolateđể đánh giá các biểu thức riêng lẻ ( name, extension) theo phạm vi. Nó có thể được sử dụng để cả đọc và đặt giá trị cho một biểu thức đã cho. Ví dụ, để đánh giá namebiểu thức người ta sẽ làm: $parse('name')($scope)để lấy giá trị "hình ảnh". Để đặt giá trị người ta sẽ làm:$parse('name').assign($scope, 'image2')

Tất cả các dịch vụ này đang làm việc cùng nhau để cung cấp giao diện người dùng trực tiếp trong AngularJS. Nhưng họ hoạt động trên các cấp độ khác nhau:

• $parsechỉ quan tâm đến các biểu thức riêng lẻ ( name, extension). Đây là một dịch vụ đọc-ghi.
• $interpolatechỉ đọc và quan tâm đến các chuỗi chứa nhiều biểu thức ( /path/{{name}}.{{extension}})
• $compile là trung tâm của máy móc AngularJS và có thể biến các chuỗi HTML (với các chỉ thị và biểu thức nội suy) thành DOM trực tiếp.

$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 không có quyền ghi vào các biến $ scope như chúng ta có trong $ eval và $ parse

$ parse, $ interpolate ---> cần được tiêm nhưng $ eval không cần phải được tiêm trong bộ điều khiển hoặc nơi nó được sử dụng

$ parse, $ interpolate cung cấp hàm có thể được đánh giá theo bất kỳ bối cảnh nào nhưng $ eval luôn được đánh giá theo phạm vi $.

$ eval và $ nội suy đằng sau hậu trường chỉ sử dụng $ parse.

Đây là lời giải thích dễ thương.

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.