Html 根据指令模板中不同元素的状态将类应用于元素

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

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

<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，因为我想将这些元素转换为指令。

---

欢迎提出任何想法

好的，我就是这样解决的： 我使用了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>

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

第二个要求是标签显示字段是否有值，我是通过查询模型来实现的。我正在测试该字段是否存在，是否有值！=''并且除了“必需”之外，它没有其他错误。

---

我测试错误的原因是，如果模型没有通过验证，它就没有值

好的，我就是这样解决的： 我使用了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>

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

第二个要求是标签显示字段是否有值，我是通过查询模型来实现的。我正在测试该字段是否存在，是否有值！=''并且除了“必需”之外，它没有其他错误。

---

我测试错误的原因是，如果模型没有通过验证，它就没有值

你的指令码在哪里？您不能只使用

ngBlur

（）和

ngFocus

（）吗？为什么不在标签中使用

ng show=“myFunction（）”

？ng show/ng focus的问题是我无法从标签访问输入字段，反之亦然。我不能像使用非指令时那样遍历dom元素来访问它们。如果我使用ngModel，那么它只会在blur上更新，并且只有在它有效（这是UX需求）时才会更新，指令代码在哪里？您不能只使用

ngBlur

（）和

ngFocus

（）吗？为什么不在标签中使用

ng show=“myFunction（）”

？ng show/ng focus的问题是我无法从标签访问输入字段，反之亦然。我无法遍历dom元素来访问它们，就像我在没有指令的情况下所做的那样。如果我使用ngModel，那么它只会在blur上更新，并且只有在它有效的情况下才会更新（这是UX需求）