[Angularjs] التوجيهات الزاويّة - وقت وكيفية استخدام الترجمة والتحكم والرابط المسبق وما بعد الوصلة



Answers

ماذا يحدث بين هذه المكالمات وظيفة؟

يتم تنفيذ وظائف التوجيه المختلفة من خلال وظيفتين nodeLinkFn تدعى $compile (حيث يتم تنفيذ compile nodeLinkFn ) ووظيفة داخلية تسمى nodeLinkFn (حيث يتم تنفيذ controller في التوجيه ، preLink و postLink ). تحدث أشياء مختلفة داخل الوظيفة الزاوية قبل وبعد استدعاء وظائف التوجيه. ولعل أبرزها هو عودة الطفل. يوضح الرسم التوضيحي المبسط التالي الخطوات الأساسية داخل مراحل الترجمة والارتباط:

لشرح هذه الخطوات ، دعنا نستخدم ترميز HTML التالي:

<div ng-repeat="i in [0,1,2]">
    <my-element>
        <div>Inner content</div>
    </my-element>
</div>

مع التوجيه التالي:

myApp.directive( 'myElement', function() {
    return {
        restrict:   'EA',
        transclude: true,
        template:   '<div>{{label}}<div ng-transclude></div></div>'
    }
});

جمع

تبدو واجهة برمجة التطبيقات ( compile API) كما يلي:

compile: function compile( tElement, tAttributes ) { ... }

في كثير من الأحيان تكون المعلمات مسبوقة بـ t للإشارة إلى العناصر والسمات المتوفرة هي تلك الموجودة في قالب المصدر ، بدلاً من تلك الخاصة بالمثيل.

قبل استدعاء compile المحتوى المستبعد (إن وجد) ، تتم إزالة القالب إلى الترميز. وبالتالي ، فإن العنصر المقدم إلى دالة compile سيبدو كما يلي:

<my-element>
    <div>
        "{{label}}"
        <div ng-transclude></div>
    </div>
</my-element>

لاحظ أن المحتوى المستبعد لم يتم إعادة إدراجه في هذه المرحلة.

بعد المكالمة إلى .compile الخاص .compile ، سوف يجتاز Angular جميع العناصر الفرعية ، بما في ذلك تلك التي قد تم تقديمها للتو بواسطة التوجيه (عناصر القالب ، على سبيل المثال).

إنشاء مثيل

في حالتنا ، سيتم إنشاء ثلاث أمثلة لقالب المصدر أعلاه (بواسطة ng-repeat ). وبالتالي ، سيتم تنفيذ التسلسل التالي ثلاث مرات ، مرة واحدة لكل مثيل.

مراقب

تتضمن واجهة برمجة التطبيقات controller يلي:

controller: function( $scope, $element, $attrs, $transclude ) { ... }

عند إدخال مرحلة الارتباط ، يتم الآن توفير وظيفة الوصلة التي يتم إرجاعها عبر $compile مع نطاق.

أولاً ، تنشئ وظيفة الارتباط نطاقًا تابعًا ( scope: true ) أو نطاقًا معزولًا ( scope: {...} ) عند الطلب.

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

قبل الارتباط

تبدو واجهة برمجة التطبيقات pre-link هكذا:

function preLink( scope, element, attributes, controller ) { ... }

لا يحدث شيء تقريباً بين المكالمة إلى .preLink ووظيفة .preLink . لا يزال الزاوي يقدم توصية حول كيفية استخدام كل منها.

بعد استدعاء .preLink ، ستقوم وظيفة الارتباط باجتياز كل عنصر تابع - استدعاء وظيفة الارتباط الصحيحة وإرفاق النطاق الحالي (الذي يعمل .preLink للعناصر التابعة).

بعد الارتباط

تشبه واجهة برمجة التطبيقات pre-link وظيفة واجهة pre-link :

function postLink( scope, element, attributes, controller ) { ... }

ربما تجدر الإشارة إلى أنه بمجرد .postLink وظيفة .postLink للتوجيه ، .postLink عملية ارتباط جميع عناصر الأطفال ، بما في ذلك جميع وظائف .postLink للأطفال.

وهذا يعني أنه في الوقت الذي يتم فيه استدعاء .postLink ، يكون الأطفال "على قيد الحياة" جاهزين. هذا يتضمن:

  • ربط البيانات
  • transclusion المطبق
  • نطاق المرفقة

وبالتالي ، سيبدو النموذج في هذه المرحلة كما يلي:

<my-element>
    <div class="ng-binding">
        "{{label}}"
        <div ng-transclude>                
            <div class="ng-scope">Inner content</div>
        </div>
    </div>
</my-element>
Question

عند كتابة توجيه Angular ، يمكن استخدام أي من الوظائف التالية للتلاعب بسلوك DOM ومحتوياته ومظهر العنصر الذي تم التصريح به عن التوجيه:

  • جمع
  • مراقب
  • قبل الارتباط
  • بعد الارتباط

يبدو أن هناك بعض الارتباك كما هو الحال بالنسبة لأي وظيفة يجب استخدامها. يغطي هذا السؤال:

أساسيات التوجيه

  • كيف تعلن وظائف مختلفة؟
  • ما هو الفرق بين قالب المصدر ونموذج المثيل ؟
  • في أي ترتيب يتم تنفيذ وظائف التوجيه؟
  • ماذا يحدث بين هذه المكالمات وظيفة؟

طبيعة وظيفة ، ما يفعل و لا

  • Compile
  • Controller
  • Pre-link
  • Post-link

أسئلة ذات صلة:




ما هو الفرق بين قالب المصدر ونموذج المثيل ؟

حقيقة أن Angular يتيح معالجة DOM يعني أن تمييز الإدخال في عملية التجميع يختلف أحيانًا عن الإخراج. وبشكل خاص ، قد يتم نسخ بعض مدخلات الإدخال عدة مرات (كما هو الحال مع ng-repeat ) قبل تقديمها إلى DOM.

المصطلحات الزاويّة غير متناسقة بعض الشيء ، لكنها لا تزال تميّز بين نوعين من العلامات:

  • قالب المصدر - الترميز المراد نسخه ، إذا لزم الأمر. إذا تم الاستنساخ ، فلن يتم عرض هذه الترميز إلى DOM.
  • نموذج المثيل - الترميز الفعلي ليتم تقديمه إلى DOM. إذا كان الاستنساخ متصلاً ، فستكون كل نسخة نسخة.

يوضح الترميز التالي هذا:

<div ng-repeat="i in [0,1,2]">
    <my-directive>{{i}}</my-directive>
</div>

يحدد مصدر HTML

    <my-directive>{{i}}</my-directive>

الذي يعمل بمثابة قالب المصدر.

ولكن نظرًا لأنه يتم تغليفه ضمن أمر ng-repeat ، فسيتم استنساخ قالب المصدر هذا (3 مرات في حالتنا). هذه الاستنساخ هي نموذج المثيل ، كل ستظهر في DOM وتكون ملزمة للنطاق ذات الصلة.




وظيفة ما بعد الارتباط

عندما يتم استدعاء وظيفة post-link ، فإن جميع الخطوات السابقة قد تمت - الربط ، التحويل ، إلخ.

هذا هو عادة مكان لمزيد من التعامل مع DOM المقدمة.

فعل:

  • التعامل مع عناصر DOM (المقدمة ، وبالتالي إنشاء).
  • إرفاق معالجات الأحداث.
  • فحص العناصر الطفل.
  • إعداد الملاحظات على السمات.
  • إعداد الساعات على النطاق.



وظيفة ما قبل الارتباط

يتم استدعاء كل وظيفة pre-link الخاصة بالتوجيه كلما تم إنشاء عنصر جديد مرتبط.

وكما رأينا سابقاً في قسم أمر الترجمة ، pre-link وظائف pre-link تدعى الوالدين ثم الطفل ، بينما تسمى وظائف post-link بـ child-then-parent .

ونادرا ما تستخدم وظيفة ما pre-link ، ولكنها يمكن أن تكون مفيدة في سيناريوهات خاصة ؛ على سبيل المثال ، عند تسجيل وحدة تحكم تابعة نفسها مع وحدة التحكم الرئيسية ، ولكن يجب أن يكون التسجيل بطريقة parent-then-child ( ngModelController يقوم بهذه الأمور بهذه الطريقة).

لا:

  • تفقد عناصر الطفل (قد لا يتم تقديمها بعد ، مرتبطة بالنطاق ، وما إلى ذلك).



Links