كيفية إضافة $watch في AngularJS

عندما ترغب في إضافة $watch لنموذج معين في AngularJS، يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى وحدة التحكم (controller) الخاصة بك:

javascriptCopy code
function 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) كما يلي:

javascriptCopy code
angular.module('controllerAsExample', [])
  .controller('SettingsController1', ['$scope', SettingsController1]);

وبهذا، يجب أن يتمكن AngularJS من إضافة $watch بنجاح إلى النموذج المحدد settings.name، وعندما يتغير الاسم، سيتم تنفيذ الكود المحدد داخل الدالة المرفقة ب $watch.

عند استخدام $watch في AngularJS، يُمكنك تتبُّع تغيُّرات القيمة في نموذج محدَّد وتنفيذ الكود المناسب بناءً على هذه التغييرات. في الكود السابق، تم استخدام دالة $watch لتتبُّع تغيُّرات قيمة settings.name، وعندما تتغيَّر هذه القيمة، يتم طباعة رسالة توضِّح التغيُّر.

تحتاج إلى تحديد النموذج الذي تريد مُراقبته في دالة $watch، ثم تحديد دالة يتم استدعاؤها عند حدوث تغيُّر في القيمة. تُستخدم دالة $watch لمتابعة التغيُّرات التي تحدث في القيمة المُراقبة، وهذا يمكن أن يُفيد في تحديد تفاعلات معيَّنة أو إجراءات تحتاج إلى حدوثها عندما تتغيَّر البيانات.

من الجيد أن تعرف أنه يُفضَّل استخدام دالة $watch بحذر، لأنها يمكن أن تؤدي إلى تأخُّر في تحميل التطبيقات الكبيرة، خصوصًا إذا تم استخدامها بشكل غير فعَّال.