it-swarm.asia

رابط مقابل ترجمة مقابل تحكم

عند إنشاء توجيه ، يمكنك وضع التعليمات البرمجية في برنامج التحويل البرمجي أو وظيفة الارتباط أو وحدة التحكم.

في المستندات ، يوضحون ما يلي:

  • يتم استخدام وظيفة التحويل البرمجي والرابط في مراحل مختلفة من الدورة الزاوية
  • تتم مشاركة وحدات التحكم بين التوجيهات

ومع ذلك ، بالنسبة لي ليست واضحة ، أي نوع من التعليمات البرمجية يجب أن تذهب إلى أين.

على سبيل المثال: هل يمكنني إنشاء وظائف في التحويل البرمجي وإلحاقها بالنطاق الموجود في الارتباط أو إرفاق الوظائف فقط بالنطاق في وحدة التحكم؟

كيف تتم مشاركة وحدات التحكم بين التوجيهات ، إذا كان يمكن أن يكون لكل توجيه وحدة التحكم الخاصة به؟ هل وحدات التحكم مشتركة بالفعل أم أنها مجرد خصائص نطاق؟

519
schacki

ترجمة:

هذه هي المرحلة حيث يقوم Angular بتجميع التوجيه الخاص بك. تسمى وظيفة الترجمة هذه مرة واحدة فقط لكل إشارة إلى التوجيه المعطى. على سبيل المثال ، قل أنك تستخدم توجيه ng -كرر. سيتعين على ng-تكرار البحث عن العنصر المتصل به واستخراج جزء html المرفق به وإنشاء وظيفة قالب.

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

مرحلة الترجمة هي تلك الخطوة في Angular والتي تُرجع دالة القالب. تسمى وظيفة القالب هذه بالزاوية وظيفة الربط.

مرحلة الربط:

مرحلة الربط هي المكان الذي تقوم فيه بإرفاق البيانات (نطاق $) بوظيفة الارتباط ، ويجب أن تُرجع لك html المرتبط. نظرًا لأن التوجيه يحدد أيضًا موقع HTML أو ما يتغير ، فمن الجيد بالفعل الانتقال. هذه هي الوظيفة حيث تريد إجراء تغييرات على html المرتبط ، أي html الذي يحتوي بالفعل على البيانات المرتبطة به. في الزاوي ، إذا كتبت رمزًا في وظيفة الارتباط ، فستكون وظيفة النشر اللاحق لها (بشكل افتراضي). إنه نوع من رد الاتصال الذي يتم استدعاؤه بعد ربط وظيفة ربط البيانات بالقالب.

مراقب :

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

467
ganaraj

أردت أيضًا إضافة ما يقوله كتاب فريق O'Reily AngularJS من قِبل فريق Google:

Controller - إنشاء وحدة تحكم تنشر واجهة برمجة تطبيقات للتواصل عبر التوجيهات. مثال جيد هو التوجيه إلى الاتصال التوجيه

الارتباط - تعديل مثيلات عنصر DOM الناتجة برمجيًا ، وإضافة مستمعي الأحداث ، وإعداد ربط البيانات.

ترجمة - قم برمجياً بتعديل قالب DOM للميزات عبر نسخ التوجيه ، كما هو الحال عند استخدامها في تكرار ng. يمكن أن تقوم دالة الترجمة أيضًا بإرجاع وظائف الارتباط لتعديل مثيلات العنصر الناتجة.

97
Nicholas Dynan

يسمح لك directive بتمديد مفردات HTML بطريقة تعريفية لبناء مكونات الويب. السمة ng-app هي توجيه ، وكذلك هي ng-controller وكل ng- prefixed attributes. يمكن أن تكون التوجيهات attributes ، tags أو حتى classnames ، comments.

كيف ولدت التوجيهات (compilation و instantiation)

ترجمة: سوف نستخدم الدالة compile لكلا manipulate DOM قبل أن يتم تقديمها وإرجاع دالة link (التي ستعالج الارتباط لنا). هذا أيضًا هو المكان المناسب لوضع أي من الطرق التي يجب مشاركتها مع كل instances من هذا التوجيه.

link: سنستخدم الدالة link لتسجيل جميع المستمعين على عنصر DOM معين (تم استنساخه من القالب) وإعداد روابطنا بالصفحة.

إذا تم تعيينها في compile() ، فسيتم تعيينها مرة واحدة فقط (وهو ما تريده غالبًا). إذا تم تعيينها في الدالة link() ، فسيتم تعيينها في كل مرة يرتبط فيها عنصر HTML بالبيانات الموجودة في الكائن.

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

app.directive("simple", function(){
   return {
     restrict: "EA",
     transclude:true,
     template:"<div>{{label}}<div ng-transclude></div></div>",        
     compile: function(element, attributes){  
     return {
             pre: function(scope, element, attributes, controller, transcludeFn){

             },
             post: function(scope, element, attributes, controller, transcludeFn){

             }
         }
     },
     controller: function($scope){

     }
   };
});

تقوم دالة Compile بإرجاع وظيفة pre و post. في دالة الارتباط المسبق ، لدينا قالب المثيل وأيضًا النطاق من controller ، ولكن القالب غير مرتبط بالنطاق ولا يزال لا يحتوي على محتوى مضمن.

دالة الارتباط Post هي حيث يكون رابط النشر هو آخر وظيفة يتم تنفيذها. اكتمل الآن transclusion ، the template is linked to a scope ، و view will update with data bound values after the next digest cycle. يعد الخيار link مجرد اختصار لإعداد وظيفة post-link.

تحكم: يمكن تمرير وحدة تحكم التوجيه إلى مرحلة ربط/تجميع توجيه أخرى. يمكن حقنه في دلائل أخرى كوسيلة لاستخدامها في التواصل بين التوجيهات.

يجب عليك تحديد اسم التوجيه المطلوب - يجب أن يكون مرتبطًا بنفس العنصر أو الأصل. يمكن بادئة الاسم بـ:

? – Will not raise any error if a mentioned directive does not exist.
^ – Will look for the directive on parent elements, if not available on the same element.

استخدم قوسًا مربعًا [‘directive1′, ‘directive2′, ‘directive3′] لطلب وحدة تحكم توجيهات متعددة.

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope, $element) {
});

app.directive('parentDirective', function() {
  return {
    restrict: 'E',
    template: '<child-directive></child-directive>',
    controller: function($scope, $element){
      this.variable = "Hi Vinothbabu"
    }
  }
});

app.directive('childDirective', function() {
  return {
    restrict:  'E',
    template: '<h1>I am child</h1>',
    replace: true,
    require: '^parentDirective',
    link: function($scope, $element, attr, parentDirectCtrl){
      //you now have access to parentDirectCtrl.variable
    }
  }
});
50
Thalaivar

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

controller: function($scope, $exceptionHandler, $attr, $element, $parse, $myOtherService, someCrazyDependency) {...

vs.

link: function(scope, element, attrs) {... //no services allowed
11
ScaryBunny

هذه عينة جيدة لفهم مراحل التوجيه http://codepen.io/anon/pen/oXMdBQ؟editors=101

var app = angular.module('myapp', [])

app.directive('slngStylePrelink', function() {
    return {
        scope: {
            drctvName: '@'
        },
        controller: function($scope) {
            console.log('controller for ', $scope.drctvName);
        },
        compile: function(element, attr) {
            console.log("compile for ", attr.name)
            return {
                post: function($scope, element, attr) {
                    console.log('post link for ', attr.name)
                },
                pre: function($scope, element, attr) {
                    $scope.element = element;
                    console.log('pre link for ', attr.name)
                        // from angular.js 1.4.1
                    function ngStyleWatchAction(newStyles, oldStyles) {
                        if (oldStyles && (newStyles !== oldStyles)) {
                            forEach(oldStyles, function(val, style) {
                                element.css(style, '');
                            });
                        }
                        if (newStyles) element.css(newStyles);
                    }

                    $scope.$watch(attr.slngStylePrelink, ngStyleWatchAction, true);

                    // Run immediately, because the watcher's first run is async
                    ngStyleWatchAction($scope.$eval(attr.slngStylePrelink));
                }
            };
        }
    };
});

أتش تي أم أل

<body ng-app="myapp">
    <div slng-style-prelink="{height:'500px'}" drctv-name='parent' style="border:1px solid" name="parent">
        <div slng-style-prelink="{height:'50%'}" drctv-name='child' style="border:1px solid red" name='child'>
        </div>
    </div>
</body>
10
Amin Rahimi
  • ترجمة : تستخدم عندما نحتاج إلى تعديل قالب التوجيه ، مثل إضافة تعبير جديد ، إلحاق توجيه آخر داخل هذا التوجيه
  • controller : يستخدم عندما نحتاج إلى مشاركة/إعادة استخدام بيانات نطاق $
  • link : هي وظيفة تستخدم عندما نحتاج إلى إرفاق معالج الأحداث أو لمعالجة DOM.
4
HamidKhan