javascript - 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>

我留下了一些空白即 Controller 和链接，因为此时我只是想弄清楚如何在开始操作 DOM 之前首先显示所有内容

我遵循了 angularjs 文档中的示例，它让我走到了这一步。我想似乎无法弄清楚如何访问范围？

感谢任何帮助。

Answer 1

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

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

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

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

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

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

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

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

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

John Lindquist 的这些视频确实为我阐明了隔离范围:

• > Understanding Isolate Scope
• > Isolate Scope '@'
• > Isolate Scope '='
• > Isolate Scope '&'