ng-repeat innerhalb der benutzerdefinierten Direktive

StackOverflow https://stackoverflow.com//questions/24021610

Frage

Daher habe ich Schwierigkeiten, den Geltungsbereich an meine benutzerdefinierten Anweisungen weiterzugeben.

Hier ist mein 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>

Hier sind meine Anweisungen

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

Hier sind meine Vorlagen.

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>

Ich habe einige Dinge leer gelassen i.e controller and link Denn zu diesem Zeitpunkt habe ich nur versucht herauszufinden, wie ich zuerst alles anzeigen lassen kann, bevor ich mit der Manipulation des DOM beginne

Ich bin dem Beispiel in der AngularJS-Dokumentation gefolgt und es hat mich so weit gebracht.Ich schätze, ich weiß nicht, wie ich auf das Oszilloskop zugreifen kann?

Jede Hilfe wird geschätzt.

War es hilfreich?

Lösung

Basierend auf Ihren Vorlagen scheint es, dass Ihr archiveNotes Die Definition der Direktive sollte eigentlich so aussehen:

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

Um das zu bekommen post Variable, die von übergeben wurde ng-repeatIm Umfang müssen Sie auch den festlegen post Attribut für das Element der Direktive:

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

Ebenso müssen Sie es in der untergeordneten Direktive festlegen:

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

...und ändere deine notes.html Vorlage:

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

Der Bereich „Isolieren“ ähnelt einer Firewall, bei der Sie Ausnahmen festlegen können, in diesem Fall für bestimmte Bereichsvariablen.Alles, was wir hier tun, ist, diese Ausnahmen in den Direktivendefinitionen festzulegen und sie dann mithilfe des Attributs an die Elemente weiterzuleiten.

Diese Videos von John Lindquist werfen für mich wirklich etwas Licht auf den isolierten Bereich:

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top