0

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。.

どうやって？？？

私は完全に間違った道を進んでいますか？これを行う簡単な方法はありますか？

4

0 に答える 0