自定义指令内的 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 的这些视频确实让我对隔离范围有了一些了解：

• 了解隔离范围
• 隔离范围“@”
• 隔离范围“=”
• 隔离范围“&”