我正在尝试使用AngularJS 1.5及其组件创建某种通用gridview.我现在所做的(伪代码)版本:
// inside <my-grid-component data="data" metadata="metadata">
<div ng-repeat="item in $ctrl.data">
<my-row-component item="item" metadata="$ctrl.metadata"></my-row-component>
</div
// inside <my-row-component item="item" metadata="metadata">
<div ng-repeat="column in $ctrl.metadata.columns">
<my-cell-component value="$ctrl.item[column]"></my-cell-component>
</div>
Run Code Online (Sandbox Code Playgroud)
现在<my-cell-component>可以有一些ng-switch处理明显情况的基本语句,比如值是文本还是图像什么的,但是由于这将被许多人和许多项目使用,有可能有人想要做一些奇特的事情. /或在细胞内高度特异.他们可能只是ammend <my-cell-component>更多的ng-switchES,但他们与哪些伤害可维护性基本框架代码搞乱.
所以,理想情况下,我想做一些开发人员可以选择为元数据中的特定字段提供自己的自定义模板的东西,例如,metadata.columns[3].customCellComponentName = 'some-custom-template';
然后<my-row-component>看起来像这样:
<div ng-repeat="column in $ctrl.metadata.columns">
<div ng-if="!column.isCustomCellComponent">
<my-cell-component value="$ctrl.item[column]"></my-cell-component>
</div>
<div ng-if="column.isCustomCellComponent">
??? --> <column.customCellComponentName value="$ctrl.item[column]"></column.customCellComponentName>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
该项目自动将所有模板放在$ templateCache中,因此解析模板应该不是问题,但除此之外,带有"???"的标记行 显然不起作用.它展示了我想要实现的目标,但我不知道如何实际做这样的事情.我查看了transclusion ng-include和其他解决方案,但似乎没有提供动态加载模板和模型绑定一些数据的选项.
任何和所有的想法都非常受欢迎.我希望尽可能远离过于复杂的指令.虽然它们允许你做很多事情,但根据我的经验,它们也是调试和可维护性的噩梦.
谢谢.