OK、私はこれに対する答えをSO全体で検索したことを誓います。私が見つけているそれぞれの答えは、ほとんどではありませんが、正確には私が探しているものではありません。
ゴール
コレクションを表示する方法を DRY できるディレクティブを書き込もうとしています。最終的な目標は、次のようなビューまたは別のディレクティブで実行できるようにすることです。
<md-grid-tile index='event' index-by='isPublic' index-key='true'>
<md-grid-tile-header>{{event.name}}</md-grid-tile-header>
<md-grid-tile-footer>
<profile-card index='eventOwner' index-by='event_id' index-key='event.$id' collection='profile'>
arbitrary transcluded content that uses {{profile}}
</profile-card>
</md-grid-tile-footer>
</md-grid-tile>
md-grid-tile-*すべて角度のある素材から来ており、その内容で物事を巧妙にトランスクルージョンします。
profile-cardトランスクルージョンされたコンテンツをラップする任意のカスタム ディレクティブです。たとえば、プロフィール情報を表示する共通のカードがありますが、配置する場所に応じて異なるアクション ボタンを配置したいと考えています。
私はindex、非常に焦点を絞った ng-repeat のように機能するディレクティブを作成しようとしています。この例では:
- 要素の attrs は、ofを使用
md-grid-tileして毎回繰り返すように指示します。eventisPublictrue - 要素上で、含まれる要素の一致する
profile-cardすべてのeventOwnerオブジェクトを検索します。次に、それらのオブジェクトが参照するオブジェクトを繰り返します。event_idevent.$idprofileeventOwner
問題
データ ソースへの接続に問題はありませんが、問題が発生する場所は次のとおりです。
- DOM の適切な場所に複数の要素を作成する
- コンテンツをトランスクルージョンする反復要素
ここではコード サンプルの目的で、データ ソースを単純化しています。 mockProvider属性に基づいてコレクションを作成するサービスに置き換えられますindex-*。
試み #1
.directive 'index', ['mockProvider', (mockProvider)->
restrict: 'A'
priority: 1
compile: (el,attrs)->
el.attr 'ng-repeat', 'item in collection'
post: (scope,el,attrs,ctrl,transclude)->
scope.collection = mockProvider
]
このアプローチを機能させることができない理由をまだ理解できていません。attr は適切にアタッチされng-repeatますが、何も繰り返されません。
試み #2
.directive 'index', ['mockProvider', (mockProvider)->
restrict: 'A'
priority: 1 # tried with 1, 1001, -1000
compile: (el,attrs)->
post: (scope,el,attrs,ctrl,transclude)->
scope.collection = mockProvider
newEl = angular.element el[0].outerHTML
newEl.attr 'ng-repeat', 'foo in [1,2,3]'
newEl.removeAttr 'pb-index'
el.replaceWith $compile(newEl[0].outerHTML)(scope)
]
これは多くのことを繰り返しますが、次の[ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. ように爆発します。非効率性のためにこれに対して警告する他のSOコメントも見ました。
試み #3
.directive 'index', ['mockProvider', (mockProvider)->
restrict: 'A'
priority: 1001
compile: (el,attrs)->
post: (scope,el,attrs,ctrl,transclude)->
el.html ""
scope.collection = mockProvider
scope.$watchCollection 'collection', (collection)->
for item,index in collection
childScope = scope.$new()
childScope.item = item
transclude childScope, (newElement)->
el.append newElement
最後に、単純な の再実装を試みましたng-repeat。これは最も近いものになりましたが、まだ機能していませんng-repeat。.
どうやって？？？
私は完全に間違った道を進んでいますか？これを行う簡単な方法はありますか？