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

【问题标题】：How do I display an Angular directive conditionally?如何有条件地显示 Angular 指令？
【发布时间】：2015-08-09 02:45:43
【问题描述】：

我正在尝试使用 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 来减少代码中的冗余？

【问题讨论】：

您在寻找 ng-show 吗？根据表达式隐藏/显示元素：docs.angularjs.org/api/ng/directive/ngShow
现在我正在使用 ng-if 解决它（ng-if 实际上从 DOM 中删除了元素，而 ng-show 只通过 CSS 隐藏它），这有助于验证，否则我' d 具有隐藏的必填字段，并且该表单永远不会被视为有效。但无论哪种方式，我都想要一种不需要在代码中添加两个单独的输入元素以避免冗余（如果可能的话）

标签： angularjs angularjs-directive angular-directive

【解决方案1】：

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

使用 ngAttr 时，使用了 $interpolate 的 allOrNothing 标志，因此如果插值字符串中的任何表达式导致 undefined，则该属性将被删除并且不会添加到元素中。

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

这样的事情怎么样：

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

三元表达式中的true 可以是任何你想要的，而不是undefined。

【讨论】：

我刚试过这个，但不幸的是无论如何仍然包含持续时间属性。我还测试了 ng-attr-duration="undefined" 和 ng-attr-duration="{{undefined}}"，但这两个都导致持续时间属性保持不变。
@Zak 很有趣。当属性名称不是指令时它可以工作（我很好奇并做了一个plunker。
@Zak 哎呀，我忘了在 Plunkr 中保存我的更改。现在更新了。看来 Angular 做错了事。在我的情况下，它没有添加 duration 属性，但是，我仍然看到我的 duration 指令的效果。

【解决方案2】：

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

<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>

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

【讨论】：