ng-repita dentro de directiva personalizado
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.
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-repeat
do â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: