ng-repita dentro de directiva personalizado

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

Pergunta

Então, eu estou lutando com o passar do escopo para o meu personalizado directivas.

Aqui está o meu 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>

Aqui está o meu 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'
}
});

aqui estão os meus modelos.

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>

Deixei várias coisas em branco i.e controller and link porque neste momento eu estava apenas tentando descobrir como fazer tudo, mostrar-se primeiro antes de eu começar a manipular o DOM

Eu segui o exemplo do angularjs documentação, e isso me fez até aqui.Eu acho que não consigo descobrir como acessar o escopo?

Qualquer ajuda é apreciada.

Foi útil?

Solução

Com base em seus modelos, parece que a sua archiveNotes directiva definição, na verdade, deve olhar como este:

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

Para obter o post variável passada da ng-repeatdo âmbito de aplicação, você também precisa definir a post atributo sobre a directiva do elemento:

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

Da mesma forma, você precisa colocá-lo sobre o filho directiva:

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

...e alterar o seu notes.html modelo:

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

Isolar escopo é como uma espécie de firewall, onde você pode definir exceções, neste caso no âmbito específico de variáveis.Tudo o que estamos fazendo aqui é definir essas exceções na directiva definições e, em seguida, passá-los através de usando o atributo sobre os elementos.

Esses vídeos por John Lindquist realmente lançar alguma luz sobre a isolar escopo para mim:

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top