ng-repeat inside custom directive

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

Question

So I'm struggling with passing the scope to my custom directives.

Here's my 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>

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

here are my templates.

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>

I left several things blank i.e controller and link because at this point i was just trying to figure how to make everything show up first before i start manipulating the DOM

I followed the example in the angularjs documentation, and it got me this far. I guess cant seem to figure out how to access the scope?

Any help is appreciated.

Was it helpful?

Solution

Based on your templates, it seems that your archiveNotes directive definition should actually look like this:

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

To get the post variable passed in from ng-repeat's scope, you also need to set the post attribute on the directive's element:

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

Similarly, you need to set it on the child directive:

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

... and change your notes.html template:

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

Isolate scope is sort of like a firewall, where you can set exceptions, in this case on specific scope variables. All we're doing here is setting those exceptions in the directive definitions, then passing them through using the attribute on the elements.

These videos by John Lindquist really shed some light on isolate scope for me:

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top