NG-ripetizione all'interno della direttiva personalizzata

Question

Quindi sto lottando con il passaggio della portata alle mie direttive personalizzate.

Ecco il mio html

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

    <archive-notes></archive-notes>


</li>

.

Ecco le mie direttive

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'
}
});

.

Ecco i miei modelli.

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>

.

Ho lasciato diverse cose Blank i.e controller and link perché a questo punto stavo solo cercando di capire come rendere tutto quello di apparire prima prima di iniziare a manipolare il DOM

Ho seguito l'esempio nella documentazione dell'Angularjs, e mi ha preso così lontano.Immagino che non riesco a capire come accedere allo scope?

Qualsiasi aiuto è apprezzato.

Answer 1

In base ai tuoi modelli, sembra che la definizione della direttiva archiveNotes debba effettivamente assomigliare a questa:

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

.

Per ottenere la variabile post passata dall'ambito di ng-repeat, è inoltre necessario impostare l'attributo post sull'elemento della Direttiva:

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

.

Allo stesso modo, è necessario impostarlo sulla direttiva figlio:

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

.

... e cambia il modello notes.html:

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

.

Isolato Scope è un tipo di firewall, in cui è possibile impostare le eccezioni, in questo caso su specifiche variabili di ambito. Tutto ciò che stiamo facendo qui sta impostando tali eccezioni nelle definizioni della direttiva, quindi passandole attraverso l'uso dell'attributo sugli elementi.

Questi video di John Lindquist hanno davvero fatto qualche luce sull'isolato per me:

.
• Comprensione dell'isolato Scope
• Isolare scope '@'
• Isolato Scope '='
• Isolare Scope '&'