Odd behavior of validation when using "wrap()" inside a directive's compile method

[sebald]

Hi there,

I encountered a bug when using .wrap() inside a directive's compile method. My goal was to create a directive that helps me writing less markup. Meaning, I wanted to create a directive that "unwraps" itself from a single Element to a full "data input" with labels, automatically adding placeholder", validation on theinput` element etc.

For example

<field-text label="Label text" ng-model="text" required my-directive="foo"></field-text>

would become

<div>
  <label for="textField">Label text</label>
  <input id="textField" name="textField" type="text" ng-model="text" required ng-model="text" my-directive="foo">
</div>

In order to achieve this I used the wrap() method + replace: true and a plain <input type="text"> for the directive's template. Everything renders correct, but when using validation I noticed some weird behavior. I think is best to see yourself, so here is a bin (try to get more than 3 chars inside the input):

Example (v1.2.26)

The same behavior occurs in the latest RC:

Example (v1.3.0-rc.4)

---

There is a workaround to achieve (almost) what I want. Here is a bin:

Worakound

The problem with the workaround is that all directive are already gathered by $compile (see the meh directive in the above bin). As a result, every directive added to the initial element (pre compilation) will be applied to the root element and to the input. There are some more issues with this workaround. E.g. if you want to do the same thing with a <select> instead of an <input>. So this solution is not ideal.

I tried to find a solution or good practice to achieve this "unwrapping" but could't find one. Maybe I am just super dump and do not see a easy solution. So if anyone has a solution for this, please share! :)