根據指令模板中不同元素的狀態將元素應用於元素

我正在嘗試構建使用標籤和文本輸入字段的指令。根據指令模板中不同元素的狀態將元素應用於元素

我希望僅當輸入字段處於焦點或字段不爲空時才顯示標籤。
這是我現在的代碼。我需要把它變成一個指令，以便在其他領域使用它。

<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

根據指令模板中不同元素的狀態將元素應用於元素

回答

相關問題