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

【问题标题】：Applying a class to an element according to the state of a different element in a directive template根据指令模板中不同元素的状态将类应用于元素
【发布时间】：2016-02-09 05:15:09
【问题描述】：

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

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

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

【问题讨论】：

指令代码在哪里？你不能只使用ngBlur (docs.angularjs.org/api/ng/directive/ngBlur) 和ngFocus (docs.angularjs.org/api/ng/directive/ngFocus) 吗？
为什么不在标签中使用ng-show="myFunction()"？
ng-show/ng-focus 的问题是我无法从标签访问输入字段，反之亦然。如果这不是指令，我无法遍历 dom 元素以获取它们。
如果我使用 ngModel，那么它只会在模糊时更新，并且只有在它有效的情况下（这是 UX 需求）

标签： html css angularjs dom

【解决方案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>

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

第二个要求是标签显示字段是否有值，我通过查询模型来做到这一点。我正在测试该字段是否存在，它有一个值 !== '' 并且除了“必需”之外没有其他错误。
我测试错误的原因是如果模型没有通过验证，它就没有值。

【讨论】：