Question

我遵循不同的数据类型，对于每种数据类型，我都有相应的指令

文本
电子邮件
音频
视频
图像

目前基于数据类型我有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内的指令，但想法是一样的;通过动态变量通过其名称更改指令。

在angularjs中使用动态指令名称

1 个答案: