javascript - Newly added elements from angular directive not getting compiled

Question

I wrapped my input tag with some div tags as per the requirement. Now the issue is, class of div tag is changing dynamically by angular, but seems this newly added div is not getting compiled and because of that, it is shown on the page (saw in view source in browser) exactly as I add it. No change is happening which it usually does if I add it directly on page instead of from directive.

I tried adding {{ name }} also in this div but it also doesn't print the name property while adding it directly on page, does work. This gave me the conclusion that the newly added div is not getting compiled properly.

I'm calling from html like this,

<!-- ag-textbox is my directive -->
<input ag-textbox ag-grid-class="col-md-4" class="form-control" id="age" type="text"  ag-name="Age" ng-model="age" ag-formname="newform" required />

My code in js is,

var fDiv = angular.element("<div class='" + agGridClass + "' "
                            + "ng-class={'has-error':" + agFormName + "." + agName + ".$invalid}>");
element.wrap(fDiv);
$compile(element.contents())(scope);

It was working when I wasn't using wrap() function as below:

element.html('').append(firstDiv + inputText + otherDiv);
$compile(element.contents())(scope);

This was working fine but now my requirement is different and I have to wrap the existing input tag so have to use the wrap() function.

I have tried $compile(element)(scope) and $compile(element.html())(scope) but none of them work as well. Is there any way to compile the newly added components?

Answer 1

After calling .wrap(), element is still a reference to the original DOM element, which doesn't include div that it is wrapped in. So when you compile element, the wrapped div is not compiled.

Assuming fDiv is a simple div, you can try using .parent() to include it in the compilation...

element.wrap(fDiv);
$compile(element.parent().contents())(scope);

Edit...

fDiv appears to be missing "s in the ng-class attribute and needs a closing </div> tag...

var fDiv = angular.element("<div class='" + agGridClass + "' "
               + "ng-class="{'has-error':" + agFormName + "." + agName + ".$invalid}"></div>");