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?