自定义指令内的ng-repeat

Question

所以我正在努力将范围传递给我的自定义指令.

这是我的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>

这是我的指示

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

这是我的模板.

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.e controller and link因为在这一点上我只是想在我开始操作DOM之前先弄清楚如何让所有东西都显示出来

我按照angularjs文档中的示例进行操作,这让我感到非常兴奋.我想似乎无法弄清楚如何访问范围？

任何帮助表示赞赏.

Answer 1

根据您的模板,您的archiveNotes指令定义似乎应该如下所示:

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

要获取post从ng-repeat范围传入的变量,还需要post在指令元素上设置属性:

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

同样,您需要在子指令上设置它:

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

...并更改您的notes.html模板:

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

隔离范围有点像防火墙,您可以在其中设置异常,在本例中为特定范围变量.我们在这里所做的就是在指令定义中设置这些异常,然后使用元素上的属性传递它们.

John Lindquist的这些视频真的为我提供了一些关于隔离范围的视频:

• 了解隔离范围
• 隔离范围'@'
• 隔离范围'='
• 隔离范围'&'