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

我正在尝试构建使用标签和文本输入字段的指令。根据指令模板中不同元素的状态将元素应用于元素

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

<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，因为我希望把这些元素融入到一个指令。任何想法都会受到欢迎

来源

2015-11-08 Itay k

你的指令代码在哪里？你不能只使用'ngBlur'（https://docs.angularjs.org/api/ng/directive/ngBlur）和'ngFocus'（https://docs.angularjs.org/api/ng/directive/ngFocus ）？ –

为什么不在标签中使用'ng-show =“myFunction（）”'？ – Aer0

ng-show/ng-focus的问题在于我无法访问标签中的输入字段，反之亦然。如果这不是一个指令，我不能遍历dom元素来像他们那样去找他们。 –

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

这段代码移除占位符，并且示出了上聚焦的标签。我正在定位标签，使其显示在文本输入的上方。

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

来源

2015-11-10 15:01:42

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

回答

相关问题