カスタムディレクティブ内のNGリピート
質問
だから私は自分のカスタム指令に範囲を渡すのに苦労しています。
これは私の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のマニュアルの例に従って、これまでのところ私を得ました。スコープにアクセスする方法を考え出すことはできないと思いますか?
任意の助けが高く評価されています。
解決
あなたのテンプレートに基づいて、あなたの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>
.
istateスコープはファイアウォールのようなものです。この場合は、特定のスコープ変数で例外を設定できます。ここでやっているのは、これらの例外を指令定義に設定してから、要素の属性を使用して渡します。
John Lindquistによるこれらのビデオは本当に私のために孤立した範囲にいくつかの光を打ちました:
所属していません StackOverflow