Angular show-hide动画始终使用可重用字段指令显示

Question

我正在努力实现“浮动标签”的概念。在尝试干掉我的代码时，我发现了一个在编译阶段构建输入表单HTML的指令。

发生的情况是，当使用指令时，“浮动标签”会显示出来，然后会逐渐消失，但在硬编码的实现中，通过根本不显示标签来正确地运行。

示例如下：

http://plnkr.co/edit/GMZnAYlq49WoPhERRnEY?p=preview

在硬编码和指令实现中，最终的HTML如下所示：

<div class="field">
  <label ng-show="ctrl.workingField" class="show-hide">Working Field</label>
  <input type="text" class="form-control" ng-model="ctrl.workingField" placeholder="Working Field"/>
</div>

如果生成的HTML是相同的，为什么指令会闪烁“浮动标签”？我想使用指令，但让它的行为像硬编码的解决方案一样。

有什么想法吗？

Answer 1

据我所知，你想不想使用指令来做决定？因为这两个示例的工作方式相同。

该指令仅限于元素标记。它验证信息并生成与您的硬编码示例相同的html。也就是说，没有其他的javascript动作。动画是通过CSS实现的。

您不能使用该指令。只需使用它的CSS即可。与指令相比，硬编码示例的用法更灵活。

编辑对不起，我已经看到你说的问题了。

请更改指令代码行

 labelElement.attr('ng-show', attrs.ngModel);

至

labelElement.attr('ng-hide', !attrs.ngModel);

并添加

.show-hide {
  display:none;
}

到css文件。

因为ng-show尝试隐藏标签，它会触发ng- hide -add转换。