it-swarm.dev

ما هو الفرق بين خدمات التحليل $ $ و interpolate $ و $ compile؟

ما الفرق بين خدمات $parse و $interpolate و $compile؟ بالنسبة لي ، فهم جميعًا يفعلون نفس الشيء: خذ القوالب وقم بتصنيفها إلى وظيفة القالب.

179
Stepan Suvorov

هذه كلها أمثلة على الخدمات التي تساعد في عرض طريقة العرض 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) (نطاق $) وسيحصل على عنصر 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. لكنهم يعملون على مستويات مختلفة:

  • $parse مهتم بالتعبيرات الفردية فقط (name ، extension). إنها خدمة للقراءة والكتابة.
  • تتم قراءة $interpolate فقط وتهتم بالسلاسل التي تحتوي على تعبيرات متعددة (/path/{{name}}.{{extension}})
  • تقع $compile في قلب ماكينات AngularJS ويمكنها تحويل سلاسل HTML (مع التوجيهات وتعبيرات الاستيفاء) إلى DOM مباشرة.
462
pkozlowski.opensource
$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

تحليل $ ، $ interpolate ---> يحتاج إلى حقنه ولكن لا يجب حقن $ eval في وحدة التحكم أو حيث يتم استخدامه

$ $ ، $ interpolate تعطي الوظيفة التي يمكن تقييمها مقابل أي سياق ولكن يتم تقييم $ eval دائما مقابل نطاق $.

$ eval و $ interpolate خلف الكواليس يستخدم تحليل $ فقط.

3
Dhana

هنا هو التفسير لطيف.

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.
0
Gajender Singh