在 angularjs 中使用动态指令名称

Question

我有以下不同的数据类型，每种数据类型都有相应的指令

1. 文字
2. 电子邮件
3. 音频
4. 视频
5. 图片

目前基于我有 if/else 逻辑并调用相应指令的数据类型。

我可以动态调用指令名称来避免 if/else 吗？

以下是我当前的代码

<emptyelement data-ng-if="column.type === 'string' && !column.isDropdown">
  <label class="admin-mandatory-field"><span data-ng-if="!getValue(column)">*</span></label>
  <input data-ng-readonly="!column.editable" type="text" class="form-control admin-textbox" data-ng-model="resource[column.name]"  placeholder="{{column.displayName}}" title="{{column.displayName}}" name="textBox{{column.name}}" required/>
  <!--Error message on violation-->
  <div class="custom-error" data-ng-show="resourceAddEditFormName['textBox{{column.name}}'].$dirty && resourceAddEditFormName['textBox{{column.name}}'].$invalid">* <span data-ng-show="resourceAddEditFormName['textBox{{column.name}}'].$error.required" data-ng-bind-template="{{column.displayName}}' is invalid.'"></span></div>
</emptyelement>
  <emptyelement data-ng-if="column.type === 'string' && column.isDropdown">
  <label class="admin-mandatory-field"><span data-ng-if="!getValue(column)">*</span></label>
  <multidropdown class="admin-textbox" data-selected-id-list="getSelectedIdListForDropdown(column)" data-dropdown="column"></multidropdown>               
</emptyelement>
<emptyelement data-ng-if="column.type === 'address'">
  <addresseditor   data-address="getValue(column)" data-column="column" data-collection-admin="collectionAdmin"></addresseditor>               
</emptyelement>
<emptyelement data-ng-if="column.type === 'object'">
  <label class="admin-mandatory-field"><span data-ng-if="!getValue(column)">*</span></label>
  <input data-ng-readonly="!column.editable" type="text" class="form-control admin-textbox" data-ng-model="resource[column.name]"  placeholder="{{column.displayName}}" title="{{column.displayName}}" name="textBox{{column.name}}" required/>
  <!--Error message on violation-->
  <div class="custom-error" data-ng-show="resourceAddEditFormName['textBox{{column.name}}'].$dirty && resourceAddEditFormName['textBox{{column.name}}'].$invalid">* <span data-ng-show="resourceAddEditFormName['textBox{{column.name}}'].$error.required" data-ng-bind-template="{{column.displayName}}' is invalid.'"></span></div>
</emptyelement> 

如何使用变量调用指令名称？我可以将数据变量的子集传递给指令。

请指教。

Answer 1

这可能会有所帮助

AngularJS Dynamic Directives inside ng-repeat

这里讨论的是动态更改ng-repeat 中的指令，但想法是一样的；通过动态变量的名称更改指令。