it-swarm.asia

كيف يمكنني استخدام نطاق $. ساعة $ و نطاق $. تنطبق في AngularJS؟

لا أفهم كيفية استخدام $scope.$watch و $scope.$apply. الوثائق الرسمية ليست مفيدة.

ما لا أفهمه بالتحديد:

  • هل هم متصلون بـ DOM؟
  • كيف يمكنني تحديث تغييرات DOM على النموذج؟
  • ما هي نقطة الاتصال بينهما؟

جربت هذا البرنامج التعليمي ، لكنه يأخذ فهم $watch و $apply كأمر مسلم به.

ماذا تفعل $apply و $watch ، وكيف يمكنني استخدامها بشكل مناسب؟

1057
ilyo

يجب أن تكون على دراية بكيفية عمل AngularJS لفهمها.

دورة الهضم ونطاق $

أولاً وقبل كل شيء ، يعرف AngularJS مفهوم ما يسمى دورة الهضم . يمكن اعتبار هذه الدورة حلقة ، يتحقق خلالها AngularJS من وجود أي تغييرات على جميع المتغيرات تمت مراقبته بواسطة جميع $scopes. لذلك إذا كنت قد حددت $scope.myVar في وحدة التحكم الخاصة بك وكان هذا المتغير محددًا للمراقبة ، فأنت تخبر ضمنياً AngularJS بمراقبة التغييرات على myVar في كل تكرار من الحلقة.

سيكون السؤال الطبيعي للمتابعة هو: هل يتم إرفاق كل شيء بـ $scope؟ لحسن الحظ ، لا. إذا كنت تراقب التغييرات التي تطرأ على كل كائن في $scope ، فستستغرق حلقة الخلاصة بسرعة الأعمار لتقييمها وستواجه مشكلات الأداء بسرعة. لهذا السبب قدم لنا فريق AngularJS طريقتين لإعلان أن بعض المتغيرات $scope تتم مراقبتها (اقرأ أدناه).

ساعة $ تساعد على الاستماع لتغييرات نطاق $

هناك طريقتان لإعلان أن المتغير $scope يتم مراقبته.

  1. باستخدامه في القالب الخاص بك عبر التعبير <span>{{myVar}}</span>
  2. عن طريق إضافتها يدويًا عبر خدمة $watch

الإعلان 1) هذا هو السيناريو الأكثر شيوعًا وأنا متأكد من أنك شاهدته من قبل ، لكنك لا تعلم أن هذا قد أنشأ ساعة في الخلفية. نعم ، كان! باستخدام توجيهات AngularJS (مثل ng-repeat) يمكن أيضًا إنشاء ساعات ضمنية.

الإعلان 2) هذه هي الطريقة التي تنشئ بها الساعات . تساعدك خدمة $watch على تشغيل بعض الأكواد عندما تتغير بعض القيمة المرتبطة بـ $scope. نادراً ما يتم استخدامه ، لكنه مفيد في بعض الأحيان. على سبيل المثال ، إذا كنت تريد تشغيل بعض الرموز في كل مرة تتغير فيها "myVar" ، فيمكنك القيام بما يلي:

function MyController($scope) {

    $scope.myVar = 1;

    $scope.$watch('myVar', function() {
        alert('hey, myVar has changed!');
    });

    $scope.buttonClicked = function() {
        $scope.myVar = 2; // This will trigger $watch expression to kick in
    };
}

تطبيق $ يتيح دمج التغييرات مع دورة الخلاصة

يمكنك التفكير في وظيفة$apply كآلية تكامل . كما ترى ، في كل مرة تقوم فيها بتغيير بعض متغير تمت مراقبته مرفق بـ $scopeكائن مباشرة ، ستعلم AngularJS أن التغيير قد حدث. وذلك لأن AngularJS عرفت بالفعل مراقبة تلك التغييرات. لذلك إذا حدث ذلك في التعليمات البرمجية التي يديرها الإطار ، فستستمر دورة الخلاصة.

ومع ذلك ، في بعض الأحيان تريد تغيير بعض القيمة خارج عالم AngularJS / وترى التغييرات تنتشر بشكل طبيعي. ضع في اعتبارك هذا - لديك قيمة $scope.myVar والتي سيتم تعديلها داخل معالج $.ajax() الخاص بـ jQuery. هذا سيحدث في مرحلة ما في المستقبل. لا يمكن أن تنتظر AngularJS هذا ، لأنه لم يتم إصدار تعليمات بالانتظار في مسج.

لمعالجة هذا ، تم تقديم $apply. يتيح لك بدء دورة الهضم بشكل صريح. ومع ذلك ، يجب عليك استخدام هذا فقط لترحيل بعض البيانات إلى AngularJS (التكامل مع أطر أخرى) ، ولكن لا تستخدم هذه الطريقة مع رمز AngularJS العادي ، لأن AngularJS سوف يلقي خطأ بعد ذلك.

كيف يرتبط كل هذا بـ DOM؟

حسنًا ، يجب أن تتبع البرنامج التعليمي مرة أخرى ، الآن بعد أن تعرف كل هذا. ستضمن دورة الخلاصة أن تظل واجهة المستخدم ورمز JavaScript متزامنين ، من خلال تقييم كل مراقب متصل بكل $scopes طالما لم يتغير شيء. إذا لم تحدث تغييرات إضافية في حلقة الملخص ، فسيتم الانتهاء منها.

يمكنك إرفاق كائنات بالكائن $scope إما بشكل صريح في وحدة التحكم ، أو عن طريق إعلانها في نموذج {{expression}} مباشرة في طريقة العرض.

آمل أن يساعد في توضيح بعض المعرفة الأساسية حول كل هذا.

قراءات أخرى:

1708
ŁukaszBachman

في AngularJS ، نقوم بتحديث نماذجنا ، وتحديث وجهات نظرنا/القوالب DOM "تلقائيًا" (عبر توجيهات مضمنة أو مخصصة).

تطبيق $ و $ watch ، كلاهما نطاقان ، لا يرتبطان بـ DOM.

المفاهيم الصفحة (القسم "Runtime") تحتوي على شرح جيد للغاية عن حلقة digest $ ، و $ application ، و $ evalAsync ، وقائمة المشاهدة $. هذه هي الصورة المصاحبة للنص:

$digest loop

أيًا كان الرمز الذي يمكنه الوصول إلى النطاق - عادةً ما تكون وحدات التحكم والتوجيهات (وظائف الارتباط و/أو وحدات التحكم الخاصة بها) - يمكنها إعداد " watchExpression " الذي ستقوم AngularJS بتقييمه مقابل هذا النطاق. يحدث هذا التقييم عندما تدخل AngularJS حلقة ملخصها $ (بشكل خاص ، حلقة "قائمة المراقبة $"). يمكنك مشاهدة خصائص النطاق الفردية ، ويمكنك تحديد وظيفة لمشاهدة خاصيتين معًا ، ويمكنك مشاهدة طول صفيف ، إلخ.

عندما تحدث الأشياء "داخل AngularJS" - على سبيل المثال ، تكتب في مربع نص يحتوي على تمكين ربط البيانات ثنائي الاتجاه في AngularJS (على سبيل المثال ، يستخدم ng-model) ، حرائق رد اتصال http $ ، وما إلى ذلك - تمت تسمية $ application بالفعل داخل مستطيل "AngularJS" في الشكل أعلاه. سيتم تقييم جميع watchExpressions (ربما أكثر من مرة - حتى يتم الكشف عن أي تغييرات أخرى).

عندما تحدث الأشياء "خارج AngularJS" - على سبيل المثال ، استخدمت bind () في توجيه وبعد ذلك وقع حريق ، مما أدى إلى استدعاء رد الاتصال ، أو بعض حرائق رد الاتصال المسجّلة في jQuery - ما زلنا في المستطيل "الأصلي". إذا قام رمز رد الاتصال بتعديل أي شيء تشاهده أي ساعة $ ، فاستدعي تطبيق $ للدخول إلى مستطيل AngularJS ، مما تسبب في تشغيل حلقة digest $ ، وبالتالي ستلاحظ AngularJS التغيير وتفعل سحرها.

157
Mark Rajcok

هذه المدونة تمت تغطيتها كل ما يخلق أمثلة وتفسيرات مفهومة.

الدالات AngularJS $scope$watch(), $digest() و $apply() هي بعض الوظائف المركزية في AngularJS. فهم $watch() و $digest() و $apply() ضروري لفهم AngularJS.

عند إنشاء ربط بيانات من مكان ما في طريقة العرض الخاصة بك إلى متغير على كائن نطاق $ ، تنشئ AngularJS "مراقبة" داخليًا. تعني الساعة أن الساعات AngularJS تتغير في المتغير في $scope object. الإطار هو "مشاهدة" المتغير. يتم إنشاء الساعات باستخدام وظيفة $scope.$watch() والتي سأغطيها لاحقًا في هذا النص.

في النقاط الرئيسية في تطبيقك ، تستدعي AngularJS وظيفة $scope.$digest(). تتكرر هذه الوظيفة خلال جميع الساعات وتتحقق من تغير أي من المتغيرات التي تمت مشاهدتها. إذا تم تغيير متغير تمت مراقبته ، فسيتم استدعاء وظيفة المستمع المقابلة. تقوم وظيفة المستمع بأي عمل تحتاجه ، على سبيل المثال تغيير نص HTML ليعكس القيمة الجديدة للمتغير الذي تمت مشاهدته. وبالتالي ، فإن وظيفة $digest() هي ما يؤدي إلى ربط ربط البيانات بالتحديث.

في معظم الأوقات ، ستقوم AngularJS باستدعاء دالات النطاق. $ watch () و $scope.$digest() لك ، ولكن في بعض الحالات قد تضطر إلى الاتصال بها بنفسك. لذلك من الجيد حقًا معرفة كيفية عملها.

يتم استخدام وظيفة $scope.$apply() لتنفيذ بعض التعليمات البرمجية ، ثم استدعاء $scope.$digest() بعد ذلك ، لذلك يتم فحص جميع الساعات وتسمى وظائف مستمع المشاهدة المقابلة. وظيفة $apply() مفيدة عند دمج AngularJS مع تعليمات برمجية أخرى.

سوف أتناول المزيد من التفاصيل حول الدالتين $watch(), $digest() و $apply() في الجزء المتبقي من هذا النص.

$ ساعة ()

تنشئ الدالة $scope.watch() مشاهدة لبعض المتغيرات. عندما تقوم بتسجيل ساعة تقوم بتمرير وظيفتين كمعلمات إلى الدالة $watch():

  • وظيفة القيمة
  • وظيفة المستمع

هنا مثال:

$scope.$watch(function() {},
              function() {}
             );

الوظيفة الأولى هي وظيفة القيمة والوظيفة الثانية هي وظيفة المستمع.

يجب أن تقوم دالة القيمة بإرجاع القيمة التي تتم مراقبتها. يمكن لـ AngularJS التحقق من القيمة التي يتم إرجاعها مقابل القيمة التي يتم إرجاعها في وظيفة الساعة في آخر مرة. بهذه الطريقة ، يمكن أن يحدد AngularJS ما إذا كانت القيمة قد تغيرت. هنا مثال:

$scope.$watch(function(scope) { return scope.data.myVar },
              function() {}
             );

ترجع دالة valule هذه المتغير $scopescope.data.myVar. إذا تغيرت قيمة هذا المتغير ، فسيتم إرجاع قيمة مختلفة ، وسيقوم AngularJS باستدعاء وظيفة المستمع.

لاحظ كيف تأخذ دالة القيمة النطاق كمعلمة (بدون $ في الاسم). من خلال هذه المعلمة ، يمكن لدالة القيمة الوصول إلى $scope ومتغيراته. يمكن أن تقوم دالة القيمة أيضًا بمراقبة المتغيرات العامة بدلاً من ذلك إذا كنت بحاجة لذلك ، ولكن في أغلب الأحيان ستشاهد متغير $scope.

يجب أن تفعل وظيفة المستمع كل ما تحتاجه إذا تغيرت القيمة. ربما تحتاج إلى تغيير محتوى متغير آخر ، أو تعيين محتوى عنصر HTML أو شيء ما. هنا مثال:

$scope.$watch(function(scope) { return scope.data.myVar },
              function(newValue, oldValue) {
                  document.getElementById("").innerHTML =
                      "" + newValue + "";
              }
             );

يعين هذا المثال HTML الداخلي لعنصر HTML على القيمة الجديدة للمتغير ، مضمن في العنصر b الذي يجعل القيمة غامقة. بالطبع كان بإمكانك القيام بذلك باستخدام الكود {{ data.myVar } ، ولكن هذا مجرد مثال على ما يمكنك القيام به داخل وظيفة المستمع.

$ هضم ()

تتكرر وظيفة $scope.$digest() من خلال جميع الساعات الموجودة في $scope object ، وكائنات نطاقها الفرعية $ (إن وجدت). عندما تتكرر $digest() على الساعات ، فإنها تستدعي وظيفة القيمة لكل ساعة. إذا كانت القيمة التي يتم إرجاعها بواسطة دالة القيمة مختلفة عن القيمة التي تم إرجاعها في آخر مرة تم استدعاؤها ، فسيتم استدعاء وظيفة المستمع لتلك الساعة.

يتم استدعاء الدالة $digest() كلما اعتقدت AngularJS بأنها ضرورية. على سبيل المثال ، بعد تنفيذ زر نقرة زر ، أو بعد إرجاع مكالمة AJAX (بعد تنفيذ وظيفة رد الاتصال المنجزة ()/done ().

قد تصادف بعض الحالات الزاوية التي لا تستدعي فيها AngularJS الدالة $digest() لك. سوف تكتشف عادة أنه من خلال ملاحظة أن روابط البيانات لا تقوم بتحديث القيم المعروضة. في هذه الحالة ، اتصل بـ $scope.$digest() ويجب أن تعمل. أو ، ربما يمكنك استخدام $scope.$apply() بدلاً من ذلك سأشرحها في القسم التالي.

$ تطبيق ()

تأخذ الدالة $scope.$apply() دالة كمعلمة يتم تنفيذها ، وبعد ذلك يتم استدعاء $scope.$digest() داخليًا. هذا يجعل من الأسهل بالنسبة لك التأكد من فحص جميع الساعات ، وبالتالي تحديث جميع روابط البيانات. فيما يلي مثال $apply():

$scope.$apply(function() {
    $scope.data.myVar = "Another value";
});

الوظيفة التي تم تمريرها إلى دالة $apply() كمعلمة ستغير قيمة $scope.data.myVar. عند إنهاء الوظيفة ، ستقوم AngularJS باستدعاء وظيفة $scope.$digest() بحيث يتم التحقق من جميع الساعات لمعرفة التغييرات في القيم التي يتم مراقبتها.

مثال

لتوضيح كيفية عمل $watch() و $digest() و $apply() ، انظر إلى هذا المثال:

<div ng-controller="myController">
    {{data.time}}

    <br/>
    <button ng-click="updateTime()">update time - ng-click</button>
    <button id="updateTimeButton"  >update time</button>
</div>


<script>
    var module       = angular.module("myapp", []);
    var myController1 = module.controller("myController", function($scope) {

        $scope.data = { time : new Date() };

        $scope.updateTime = function() {
            $scope.data.time = new Date();
        }

        document.getElementById("updateTimeButton")
                .addEventListener('click', function() {
            console.log("update time clicked");
            $scope.data.time = new Date();
        });
    });
</script>

مثاله يربط المتغير $scope.data.time بتوجيه الاستيفاء الذي يدمج القيمة المتغيرة في صفحة HTML. ينشئ هذا الربط ساعة داخليًا على $scope.data.time variable.

يحتوي المثال أيضًا على زرين. يحتوي الزر الأول على مستمع ng-click مرفق به. عند النقر فوق هذا الزر ، يتم استدعاء وظيفة $scope.updateTime() ، وبعد ذلك تستدعي AngularJS $scope.$digest() بحيث يتم تحديث روابط البيانات.

يحصل الزر الثاني على مستمع أحداث JavaScript قياسي مرفق به من داخل وظيفة جهاز التحكم. عند النقر فوق الزر الثاني ، يتم تنفيذ وظيفة المستمع. كما ترى ، فإن وظائف المستمع لكلا الزرين تفعل نفس الشيء تقريبًا ، ولكن عندما يتم استدعاء وظيفة مستمع الزر الثاني ، لا يتم تحديث ربط البيانات. هذا لأنه لا يتم استدعاء $scope.$digest() بعد تنفيذ مستمع أحداث الزر الثاني. وبالتالي ، إذا قمت بالنقر فوق الزر الثاني ، فسيتم تحديث الوقت في المتغير $scope.data.time ، ولكن لا يتم عرض الوقت الجديد أبدًا.

لإصلاح ذلك ، يمكننا إضافة مكالمة $scope.$digest() إلى السطر الأخير من مستمع أحداث الزر ، مثل هذا:

document.getElementById("updateTimeButton")
        .addEventListener('click', function() {
    console.log("update time clicked");
    $scope.data.time = new Date();
    $scope.$digest();
});

بدلاً من استدعاء $digest() داخل وظيفة مستمع الزر ، يمكنك أيضًا استخدام دالة $apply() مثل هذا:

document.getElementById("updateTimeButton")
        .addEventListener('click', function() {
    $scope.$apply(function() {
        console.log("update time clicked");
        $scope.data.time = new Date();
    });
});

لاحظ كيف يتم استدعاء الدالة $scope.$apply() من داخل وحدة إصغاء حدث الزر ، وكيف يتم تنفيذ تحديث المتغير $scope.data.time داخل الوظيفة التي تم تمريرها كمعلمة إلى وظيفة $apply(). عند انتهاء استدعاء دالة $apply() ، استدعاءات AngularJS $digest() داخليًا ، بحيث يتم تحديث جميع روابط البيانات.

61
Alex Jolig

يمتد AngularJS هذا events-loop ، وإنشاء شيء يسمى AngularJS context.

$ watch ()

في كل مرة تقوم فيها بربط شيء ما في واجهة المستخدم ، تقوم بإدخال $watch في قائمة $watch.

User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

لدينا هنا $scope.user ، وهو مرتبط بالإدخال الأول ، ولدينا $scope.pass ، وهو مرتبط بالإدخال الثاني. عند القيام بذلك ، نضيف اثنين $watchES إلى قائمة $watch.

عند تحميل القالب ، AKA في مرحلة الارتباط ، سيبحث المترجم عن كل توجيه ويخلق كل $watches اللازمة.

يوفر AngularJS $watch و $watchcollection و $watch(true). يوجد أدناه رسم تخطيطي أنيق يوضح جميع العناصر الثلاثة المأخوذة من المراقبين بعمق .

 Enter image description here

angular.module('MY_APP', []).controller('MyCtrl', MyCtrl)
function MyCtrl($scope,$timeout) {
  $scope.users = [{"name": "vinoth"},{"name":"yusuf"},{"name":"rajini"}];

  $scope.$watch("users", function() {
    console.log("**** reference checkers $watch ****")
  });

  $scope.$watchCollection("users", function() {
    console.log("**** Collection  checkers $watchCollection ****")
  });

  $scope.$watch("users", function() {
    console.log("**** equality checkers with $watch(true) ****")
  }, true);

  $timeout(function(){
     console.log("Triggers All ")
     $scope.users = [];
     $scope.$digest();

     console.log("Triggers $watchCollection and $watch(true)")
     $scope.users.Push({ name: 'Thalaivar'});
     $scope.$digest();

     console.log("Triggers $watch(true)")
     $scope.users[0].name = 'Superstar';
     $scope.$digest();
  });
}

http://jsfiddle.net/2Lyn0Lkb/

حلقة $digest

عندما يتلقى المستعرض حدثًا يمكن إدارته بواسطة سياق AngularJS ، سيتم تشغيل حلقة $digest. تتكون هذه الحلقة من حلقتين أصغر. أحدهما يعالج قائمة الانتظار $evalAsync ، والآخر يعالج قائمة الانتظار $watch list. سيتم تنفيذ $digest من خلال قائمة $watch التي لدينا

app.controller('MainCtrl', function() {
  $scope.name = "vinoth";

  $scope.changeFoo = function() {
      $scope.name = "Thalaivar";
  }
});

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

لدينا هنا $watch واحد فقط لأن النقر ng لا ينشئ أي ساعات.

نضغط على الزر.

  1. يتلقى المستعرض حدثًا سيدخل سياق AngularJS
  2. سيتم تشغيل حلقة $digest وستطلب من كل دولار مشاهدة التغييرات.
  3. نظرًا لأن $watch التي كانت تراقب التغييرات في نطاق $. name تُبلغ عن التغيير ، فستفرض حلقة $digest أخرى.
  4. حلقة جديدة تقارير لا شيء.
  5. يستعيد المتصفح عنصر التحكم وسيعمل على تحديث DOM الذي يعكس القيمة الجديدة لـ $ scope.name
  6. الشيء المهم هنا هو أن كل حدث يدخل سياق AngularJS سيتم تشغيل حلقة $digest. هذا يعني أنه في كل مرة نكتب فيها خطابًا في أحد المدخلات ، ستعمل الحلقة على التحقق من كل $watch في هذه الصفحة.

$ تطبيق ()

إذا اتصلت بـ $apply عند إطلاق حدث ما ، فسوف يمر عبر السياق الزاوي ، لكن إذا لم تتصل به ، فسيتم تشغيله خارجه. الأمر بهذه السهولة. $apply ستتصل بـ $digest() حلقة داخليًا وستتكرر في جميع الساعات لضمان تحديث DOM بالقيمة المحدثة حديثًا.

ستعمل طريقة $apply() على تشغيل المراقبين على سلسلة $scope بأكملها ، في حين أن طريقة $digest() سوف تشغل المراقبين فقط على $scope الحالي و children. عندما لا تحتاج أي من الكائنات $scope) العليا إلى معرفة التغييرات المحلية ، يمكنك استخدام $digest().

43
Thalaivar

هناك $watchGroup و $watchCollection كذلك. على وجه التحديد ، $watchGroup مفيد حقًا إذا كنت تريد استدعاء دالة لتحديث كائن له خصائص متعددة في طريقة عرض ليست كائن dom ، على سبيل المثال عرض آخر في قماش ، webGL أو طلب الخادم. هنا ، وثائق رابط .

17
Utkarsh Bhardwaj

لقد عثرت على مقاطع فيديو متعمقة للغاية تغطي دورات $watch و $apply و $digest وهضمها في:

فيما يلي بعض الشرائح المستخدمة في مقاطع الفيديو هذه لشرح المفاهيم (فقط في حالة ، في حالة إزالة/عدم عمل الروابط أعلاه).

 Enter image description here

في الصورة أعلاه ، لا يتم مشاهدة "$ scope.c" لأنه غير مستخدم في أي من روابط البيانات (في الترميز). سيتم مشاهدة اثنين آخرين ($scope.a و $scope.b).

 Enter image description here

من الصورة أعلاه: استنادًا إلى حدث المستعرض المعني ، يلتقط AngularJS الحدث ويؤدي دورة الهضم (يمر بجميع الساعات للتغييرات) ، ويقوم بتنفيذ وظائف المراقبة وتحديث DOM. إذا لم تكن أحداث المستعرض ، فيمكن تشغيل دورة الملخص يدويًا باستخدام $apply أو $digest.

المزيد عن $apply و $digest:

 Enter image description here

17
user203687

مجرد الانتهاء من قراءة كل ما سبق ، ومملة والنعاس (آسف ولكن هذا صحيح). تقنية للغاية ومتعمقة ومفصلة وجافة. لماذا أكتب؟ نظرًا لأن AngularJS ضخمة ، فإن الكثير من المفاهيم المرتبطة ببعضها البعض يمكنها تحويل أي شخص يسير على الطريق. كثيرا ما سألت نفسي ، أنا لست ذكي بما فيه الكفاية لفهمها؟ لا! السبب في ذلك هو قلة عدد الأشخاص الذين يمكنهم شرح التقنية بلغة مقابل الدمية بدون/كل المصطلحات! حسنًا ، دعني أجرب:

1) كلها أشياء يحركها الحدث. (أسمع الضحك ولكن أقرأ)

إذا كنت لا تعرف ما الذي يحركه الحدث ، ثم تعتقد أنك تضع زرًا على الصفحة ، اربطه مع وظيفة باستخدام "عند النقر" ، في انتظار أن يقوم المستخدمون بالنقر فوقه لتحريك الإجراءات التي تزرعها داخل وظيفة. أو فكر في "مشغل" SQL Server/Oracle.

2) $ watch "on-click".

ما هو خاص هو أنه يأخذ وظيفتين كمعلمات ، أول واحد يعطي القيمة من الحدث ، والثاني يأخذ القيمة في الاعتبار ...

3) $ digest هو الرئيس الذي يتفقد بلا كلل ، bla-bla-bla ولكنه مدرب جيد.

4) تطبيق $ يمنحك الطريقة التي ترغب في القيام بها يدويًا ، مثل إثبات الفشل (في حالة عدم الضغط على نقرة ، يمكنك إجبارها على التشغيل.)

الآن ، لنجعلها مرئية. صور هذا لتجعل من السهل الحصول على الفكرة:

في مطعم،

- الناظرون من المفترض أن يأخذوا أوامر من العملاء ، هذا هو

$watch(
  function(){return orders;},
  function(){Kitchen make it;}
);

- مدير يركض للتأكد من أن جميع النوادل مستيقظين ، تستجيب لأي علامة من التغييرات من العملاء. هذا هو $digest()

- المالك لديه القدرة المطلقة لدفع الجميع عند الطلب ، وهذا هو $apply()

12
Jeb50