ng-repeat en el interior de encargo de la directiva

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

Pregunta

Así que estoy luchando con el pasar del ámbito a mi directivas personalizadas.

Aquí está mi 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>

Aquí está mi directivas

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

aquí están mis plantillas.

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>

He dejado varias cosas en blanco i.e controller and link porque en este momento sólo estaba tratando de entender cómo hacer que todo aparecer primero antes de empezar a manipular el DOM

He seguido el ejemplo de la angularjs documentación, y me puso en este momento.Supongo que no puedo parecen de averiguar cómo acceder a la alcance?

Cualquier ayuda es muy apreciada.

¿Fue útil?

Solución

Basado en sus plantillas, parece que su archiveNotes definición de la directiva en realidad debería tener este aspecto:

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

Para obtener el post variable que se pasa de ng-repeat's ámbito de aplicación, también es necesario establecer la post atributo de la directiva del elemento:

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

Del mismo modo, es necesario establecer en el niño directiva:

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

...y cambiar su notes.html plantilla:

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

Aislar ámbito de aplicación es como una especie de firewall, donde se puede establecer excepciones, en este caso en el ámbito específico de las variables.Todo lo que estamos haciendo aquí es la configuración de las excepciones de la directiva, las definiciones, a continuación, pasar a través del uso del atributo en los elementos.

Estos videos por Juan Lindquist realmente arrojar algo de luz sobre aislar alcance para mí:

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top