ng-repeat dans la directive personnalisée

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

Question

J'ai donc du mal à transmettre la portée de mes directives personnalisées.

Voici mon 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>

Voici mes directives

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

voici mes modèles.

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>

J'ai laissé plusieurs choses vides i.e controller and link parce qu'à ce stade, j'essayais juste de comprendre comment tout faire apparaître avant de commencer à manipuler le DOM

J'ai suivi l'exemple de la documentation d'Angularjs, et cela m'a mené jusqu'ici.Je suppose que je n'arrive pas à comprendre comment accéder au scope ?

Toute aide est appréciée.

Était-ce utile?

La solution

D'après vos modèles, il semble que votre archiveNotes la définition de la directive devrait en fait ressembler à ceci :

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

Pour obtenir le post variable transmise depuis ng-repeatla portée de, vous devez également définir le post attribut sur l'élément de la directive :

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

De même, vous devez le définir sur la directive enfant :

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

...et changez votre notes.html modèle:

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

Isolate scope est un peu comme un pare-feu, dans lequel vous pouvez définir des exceptions, dans ce cas sur des variables de portée spécifiques.Tout ce que nous faisons ici, c'est définir ces exceptions dans les définitions de directive, puis les transmettre en utilisant l'attribut sur les éléments.

Ces vidéos de John Lindquist m'ont vraiment éclairé sur la portée d'isolement :

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top