0

好的，我发誓我已经到处搜索了这个问题的答案。我找到的每个答案几乎但不完全是我正在寻找的。

目标

我正在尝试编写一些指令，让我干掉我展示收藏的方式。最终目标是能够在视图或其他指令中执行如下操作：

<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-*所有这些都来自 angular-material，并用它们的内容做花哨的嵌入。 profile-card是一些包含嵌入内容的任意自定义指令。例如，我有一张普通卡来显示个人资料信息，但我想根据我放置的位置在其上放置不同的操作按钮。

我正在尝试创建index指令，它的作用就像一个非常集中的 ng-repeat。在这个例子中：

  • 元素上的 attrsmd-grid-tile告诉它event使用isPublicof重复每个true。
  • 在profile-card元素上，它将找到与包含元素匹配的所有eventOwner对象。然后它将重复这些对象引用的对象。event_idevent.$idprofileeventOwner

问题

我连接到数据源没有问题，我遇到的问题是：

  • 在 DOM 中的正确位置创建多个元素
  • 包含内容的重复元素

出于代码示例的目的，我正在简化数据源。 mockProvider将替换为基于index-*attrs 创建集合的服务。

尝试#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
]

我仍然无法弄清楚为什么我不能让这种方法发挥作用。ng-repeatattr 正确附加，但没有重复。

尝试#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