This may be more of a misunderstanding with my knowledge of how HTML works rather than a bug in angular-translate
:
When I create a <label>
that wraps an <input>
<label translate="APP.PURCHASE_ORDER_DETAILS.PURCHASE_ORDER_DETAILS_DIALOG.VENDOR_ID_INPUT_LABEL">
<input class="vendor-id-input" type="text">
</label>
The rendered HTML does not contain the input element
<label translate="APP.PURCHASE_ORDER_DETAILS.PURCHASE_ORDER_DETAILS_DIALOG.VENDOR_ID_INPUT_LABEL" class="ng-scope">Vendor ID</label>
However, if I use the angular-translate
filter instead of the directive
<label>
{{ 'APP.PURCHASE_ORDER_DETAILS.PURCHASE_ORDER_DETAILS_DIALOG.VENDOR_ID_INPUT_LABEL' | translate }}
<input class="vendor-id-input" type="text"/>
</label>
The rendered DOM element appears as I would expect (i.e. with the <input>
element still intact)
<label class="ng-binding"> Vendor ID <input class="vendor-id-input" type="text"> </label>
I can also get it to work properly if I create the <input>
outside of the <label>
and use the for
attribute to link
the two elements
<label for="vendor-id" translate="APP.PURCHASE_ORDER_DETAILS.PURCHASE_ORDER_DETAILS_DIALOG.VENDOR_ID_INPUT_LABEL"></label>
<input class="vendor-id-input" id="vendor-id" type="text">
TL;DR
Why am I not able to use the
angular-translate
directive on a<label>
if an<input>
element is nested inside?