Question

我正在尝试使用Angular指令来创建自定义输入字段类型。例如，我有一个名为“duration”的类型，它绘制三个单独的小时，分钟和秒字段。我正在尝试将该指令用作输入元素的属性，并且该指令替换了输入元素。

例如，在以下代码中：

<input duration>

将呈现为<div>，其中包含多个输入，原始输入将不在图片中。

我正在通过不同类型的多个表单字段运行ngRepeat循环，包括duration。我想找到一种只需要在HTML中输入一个输入的方法，只有当字段应该是duration类型时才应用duration属性。我尝试了以下方法：

<div ng-repeat="field in fields">
    <input type='{{field}}' ng-attr-duration="field==='duration'">
</div>

与该代码的问题是，每一个元素都呈现为duration，因为ng-attr-duration被评价为duration='false'当该字段不是持续时间，这会触发我的指令。

有没有办法对我来说，有条件申请指令，而无需定义多个<input> s到降低我的代码冗余？

Answer 1

看看directive docs对ng-attr的评价：

使用ngAttr时，使用allOrNothing的{{1}}标志，因此如果插值字符串中的任何表达式产生$interpolate，则该属性将被删除而不会添加到该元素中。

请注意，您需要使用花括号，以便Angular将插入表达式。并且，如果您的表达式中包含未定义的术语，则不会添加该属性。

这样的事情怎么样：

undefined

三元表达式中的<div ng-repeat="field in fields"> <input type='{{field}}' ng-attr-duration="{{field==='duration' ? true : undefined}}"> </div>可以是您想要的任何内容，而不是true。

Answer 2

我能想到你可以使用条件if-else的ng-switch

<div ng-repeat="field in fields">
   <div ng-switch on="field">
      <input ng-switch-when="true"  type='{{field}}' ng-attr-duration="field==='duration'">
      <input ng-switch-default="true"  type='{{field}}'>
   </div>
</div>

它还将保持代码的可读性。

如何有条件地显示Angular指令？

2 个答案: