ng-repeat داخل التوجيه المخصص

Question

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

وهنا بلدي أتش تي أم أل

<li ng-repeat="post in posts | filter:search | orderBy:sortField:reverse" class="archives-listing" ng-class="{'last-border':$last}">

    <archive-notes></archive-notes>


</li>

وهنا توجيهاتي

app.directive('archiveNotes', function(){
return {
    restrict: 'E',
    transclude: true,
    scope: {
        notes: '@',
        paths: '@'
    },
    controller: function($scope) {

    },
    templateUrl: '/wp-content/themes/twentythirteen/js/angular/templates/notes.html'
}
})
app.directive('archiveFolders', function(){
return {
    require: '^archiveNotes',
    restrict: 'E',
    transclude: true,
    scope: {
        path: '@'
    },
    link: function(scope, element, attrs) {

    },
    templateUrl: '/wp-content/themes/twentythirteen/js/angular/templates/folders.html'
}
});

هنا القوالب الخاصة بي.

notes.html
<div ng-class="{'found' : find(post.paths[$index], search)}" class="arch-notes">
    <div ng-bind-html="is_NotesEmpty(post.notes)">{{post.notes}}</div>
    <archive-folders></archive-folders>
</div>

folders.html
<div ng-repeat="path in post.paths | filter:search track by $index" ng-transclude>
    <span class="arch-paths">{{path}}</span>
</div>

لقد تركت عدة أشياء فارغة i.e controller and link لأنني في هذه المرحلة كنت أحاول فقط معرفة كيفية جعل كل شيء يظهر أولاً قبل أن أبدأ في التعامل مع DOM

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

هو موضع تقدير أي مساعدة.

Answer 1

بناءً على القوالب الخاصة بك، يبدو أن ملفك archiveNotes يجب أن يبدو تعريف التوجيه في الواقع كما يلي:

app.directive('archiveNotes', function(){
return {
    ...
    scope: {
        post: '='
    },
    ...
}
})

للحصول على post المتغير الذي تم تمريره من ng-repeatنطاق، تحتاج أيضًا إلى تعيين post السمة على عنصر التوجيه:

<archive-notes post="post"></archive-notes>

وبالمثل، تحتاج إلى تعيينه على التوجيه الفرعي:

app.directive('archiveFolders', function(){
return {
    ...
    scope: {
        post: '='
    },
    ...
}
});

...وتغيير الخاص بك notes.html نموذج:

<archive-folders post="post"></archive-folders>

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

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

• فهم نطاق العزلة
• عزل النطاق '@'
• عزل النطاق '='
• عزل النطاق '&'