عندما ترغب في إضافة $watch
لنموذج معين في AngularJS، يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى وحدة التحكم (controller
) الخاصة بك:
javascriptfunction SettingsController1($scope) {
this.name = "John Smith";
this.contacts = [
{type: 'phone', value: '408 555 1212'},
{type: 'email', value: '[email protected]'}
];
$scope.$watch(() => this.name, (newValue, oldValue) => {
console.log('Name changed from ' + oldValue + ' to ' + newValue);
});
}
في هذا المثال، تم إضافة دالة $watch
إلى النموذج settings.name
لتتبع التغييرات على الاسم. يتم استخدام $watch
لتحديد دالة للاستدعاء عندما يتغير القيمة. في هذه الحالة، سيتم طباعة رسالة في وحدة التحكم (controller
) عندما يتغير الاسم.
عليك أيضًا إضافة $scope
كوحدة حقن (dependency
) في وحدة التحكم (controller
) لاستخدام $watch
. ويمكنك تحقيق ذلك عن طريق تغيير تعريف وحدة التحكم (controller
) كما يلي:
javascriptangular.module('controllerAsExample', [])
.controller('SettingsController1', ['$scope', SettingsController1]);
وبهذا، يجب أن يتمكن AngularJS من إضافة $watch
بنجاح إلى النموذج المحدد settings.name
، وعندما يتغير الاسم، سيتم تنفيذ الكود المحدد داخل الدالة المرفقة ب $watch
.
المزيد من المعلومات
عند استخدام $watch
في AngularJS، يُمكنك تتبُّع تغيُّرات القيمة في نموذج محدَّد وتنفيذ الكود المناسب بناءً على هذه التغييرات. في الكود السابق، تم استخدام دالة $watch
لتتبُّع تغيُّرات قيمة settings.name
، وعندما تتغيَّر هذه القيمة، يتم طباعة رسالة توضِّح التغيُّر.
تحتاج إلى تحديد النموذج الذي تريد مُراقبته في دالة $watch
، ثم تحديد دالة يتم استدعاؤها عند حدوث تغيُّر في القيمة. تُستخدم دالة $watch
لمتابعة التغيُّرات التي تحدث في القيمة المُراقبة، وهذا يمكن أن يُفيد في تحديد تفاعلات معيَّنة أو إجراءات تحتاج إلى حدوثها عندما تتغيَّر البيانات.
من الجيد أن تعرف أنه يُفضَّل استخدام دالة $watch
بحذر، لأنها يمكن أن تؤدي إلى تأخُّر في تحميل التطبيقات الكبيرة، خصوصًا إذا تم استخدامها بشكل غير فعَّال.