التضمين والنطاقات في الزاوية:لماذا هذا لا يعمل؟

Question

لدي إعداد بسيط للغاية:

<pane title="mytitle">Title in parent (transcluded): {{title}}</pane>

و

angular.module('transclude', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: true,
      scope: { title:'@' },
      template: '<div>' +
                  '<div>Title in isolated scope: {{title}}</div>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
});

الغطاس هنا: http://plnkr.co/edit/yRHcNGjQAq1NHDTuwXku

التحويل نفسه يعمل ولكن {{title}} يتم استبداله فقط في قالب التوجيه.
ال {{title}} داخل العنصر المضمن يبقى فارغًا على الرغم من أن التوجيه يحتوي على متغير title في نطاقها.لماذا هذا؟

Answer 1

نطاق العنصر المنجز هو نطاق التوجيه ولكنه أخوي.هذا هو ما يقوله الوثائق:

في إعداد نموذجي، تقوم القطعة بإنشاء نطاق عزل، ولكن العزف ليس طفلا، ولكن شقيق نطاق عزل.

أبسط حل في هذه الحالة كيف يمكنك الوصول إلى النطاق المتساقط هو مثل هذا:

giveacodicetagpre.

العرض التوضيحي: http://plnkr.co/edit/ouq9b4f2qfph557708q1؟p=preview o>

Answer 2

@dfsq صحيح بشأن:

إن نطاق العنصر المنقل ليس نطاقًا للطفل للتوجيه ولكنه أحد الأخطاء

أود إضافة المزيد من التعليقات لماذا هذا هو السلوك المتوقع لـ angularJs.كما تقول المستندات:

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

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

إذا قررت أن المحتوى ينتمي إلى التوجيه.لديك خياران:

1) اجعل المحتوى جزءًا من القالب

    angular.module('transclude', [])
         .directive('pane', function(){
            return {
              restrict: 'E',
              transclude: true,
              scope: { title:'@' },
              template: '<div>' +
                          '<div>Title in isolated scope: {{title}}</div>' +
                          '<div>' +
                             ' Title in parent (transcluded): {{title}} ' +
                         ' </div>' +
                        '</div>'
            };
   });

تجريبي

2) استخدم النسخ المخصص لربط النطاق بنفسك:

angular.module('transclude', [])
     .directive('pane', function(){
        return {
          restrict: 'E',
          transclude: true,
          scope: { title:'@' },
          template: '<div>' +
                      '<div>Title in isolated scope: {{title}}</div>' +
                      '<div class="transclude"></div>' +
                    '</div>',
        link: function (scope, element, attr,controller, linker) {
           linker(scope, function(clone){
                  element.find(".transclude").append(clone); // add to DOM
           });
          }
        };
    });

تجريبي