Hey everyone! I created a form using dynamic data and in the future, I will need to compile this form, fill it with data, and submit it. Here is how I built the form:
<div>
<form name="pageForm">
<div>
<div class="form-group" ng-repeat="item in formStructure.form_data"
dynamic="item" templates="templates"></div>
</div>
</form>
</div>
I have templates for different parts/inputs of the forms stored in the JavaScript code like this:
$scope.templates.checkbox = '<label><input ng-required="item.conf.required"' +
'ng-model="formData[item.conf.name]" type="checkbox" > {{item.conf.title}} </label>';
And I am using the following directive:
function dynamic ($compile) {
return {
restrict: 'A',
replace: true,
scope: { dynamic: '=dynamic',
templates: '=templates',
eventlstn: '&'
},
link: function postLink(scope, ele, attrs) {
scope.$watch( 'dynamic' , function(html){
scope.item = html;
ele.html(scope.templates[html.type]);
$compile(ele.contents())(scope);
});
}
};
}
However, after creating the form, clicking on elements with ng-click="someFunctionINController()" doesn't trigger any actions.
In addition, I'm unable to access form data using ng-model in my HTML.