อะไรคือข้อแตกต่างระหว่าง $ parse, $ interpolate และ $ compile services?

ความแตกต่างระหว่างคืออะไร$parse, $interpolateและ$compileบริการ? สำหรับฉันพวกเขาทั้งหมดทำสิ่งเดียวกัน: นำเทมเพลตและรวบรวมไปยังเทมเพลต - ฟังก์ชั่น

นี่คือตัวอย่างทั้งหมดของบริการที่ช่วยในการแสดงภาพ AngularJS (แม้ว่า$parseและ $interpolateสามารถนำมาใช้นอกโดเมนนี้ได้) เพื่อแสดงให้เห็นถึงบทบาทของแต่ละบริการลองมาดูตัวอย่างของ HTML ชิ้นนี้กัน:

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

และค่าในขอบเขต:

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

ให้มาร์กอัปนี้ที่นี่คือสิ่งที่แต่ละบริการนำไปสู่ตาราง:

• $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')

บริการทั้งหมดนั้นทำงานร่วมกันเพื่อมอบ UI แบบสดใน 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 ไม่สามารถเข้าถึงการเขียนตัวแปร $ scope ได้เนื่องจากเรามี $ eval และ $ parse

$ 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.