Question

我正在尝试构建一个使用标签和文本输入字段的指令。

我希望标签仅在输入字段处于焦点或字段不为空时显示这是我现在的代码。我需要把它变成一个指令才能在其他领域使用它。

<label class="text-field-top-label"></label>
<input  type="email"
        name="email"
        ng-model="user.email"
        ng-model-options="{updateOn: 'blur'}"
        required
        placeholder="Email address"/>

我无法弄清楚如何去做，因为我无法查找标签或文本字段而且我不想为它们分配ID，因为我想将这些元素转换为指令。欢迎任何想法

Answer 1

好的，这就是我解决这个问题的方法：我使用了CSS和angular的组合。我将标签的显示设置为无，然后我使用了以下CSS：

&:focus::-webkit-input-placeholder { color:transparent; }
&:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
&:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
&:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
&:focus + label {
  display: inline-block;
}

和HTML：

<input  type="email"
        name="email"
        ng-model="user.email"
        ng-model-options="{updateOn: 'blur'}"
        required
        placeholder="Email address"/>
<label class="text-field-top-label"></label>

这段代码删除占位符并在焦点上显示标签。我正在定位标签，使其显示在文本输入上方。

第二个要求是标签显示字段是否有值，我是通过查询模型来完成的。我正在测试该字段是否存在，它是否具有值！==''并且它没有“必需”以外的错误。
我测试错误的原因是如果模型没有通过验证，模型将没有值。

根据指令模板

1 个答案: