将指令名称作为参数的角度指令答案

【问题标题】：angular directive that takes a directive name as a parameter将指令名称作为参数的角度指令
【发布时间】：2015-09-03 07:39:01
【问题描述】：

我正在尝试创建一个列表/网格，它知道根据某些指令呈现其项目，其中行呈现指令将是网格的参数。

我能够创建这样的东西：

<div repeat-directive-per-item="directiveName" items="my_items" item-attr="an_item"></div>

通过从模板函数返回合成模板，但是当我厌倦了在另一个指令中使用该指令时遇到了问题。

在我尝试解决这些问题之前，我想问一下这是否可以通过一些更简单的方式来完成。

我正在寻找这样的语法：

<div ng-repeat="{{itemAttr}} in results" {{rowDirective}} /></div>

但 ng-repeat 似乎不愿意做这种插值。

我知道我还可以限制 rowDirective 和匹配 itemAttr 的对，并对它们执行 if，但感觉不那么通用且不那么优雅。

【问题讨论】：

{{itemAttr}} 和{{rowDirective}} 的最终目的是什么，它们究竟应该做什么？如果不看全貌，就很难提出可行的建议。一些简单的 plunker 就可以了。
rowDirctive 是一个指令的名称，它希望有一个隔离范围，该范围具有我想要绑定当前结果的某些属性。
和 itemAttr 希望允许我为绑定当前结果的属性选择不同的属性名称。因此，此类行呈现指令所需的“接口”将仅包括具有一个知道它们从中读取所有数据的属性。
这个案例太复杂了，无法用文字来描述它，并且可能包含 XY 问题，这就是为什么如果您正在寻找更简单的方法来执行此操作，示例代码是必不可少的。

【解决方案1】：

您不能使用{{}} 插值创建属性。

在指令中创建模板时，您可以使用指令的模板功能，它可以帮助您通过访问attribute值来添加属性。

template: function(element, attrs){
   return '<div ng-repeat="{{itemAttr}} in results" '+ attrs.repeatDirectivePerItem +' /></div>'
}

【讨论】：