Hello!
Been working on a large scale, enterprise application over the last two
years where we have built a custom component library that dynamically
builds angular forms from a REST API response/ JSON data. We are noticing
that render time performance with these components is not the greatest and
it seems that most of the load is in inserting these "dynamic form fields"
to the DOM. The approach we went with is to read the JSON data in the Link
function of the directive and use $compile to dynamically choose the
template to use based on a type data property. Seems pretty standard when
googling for other Angular1+ examples, *but was wondering if this is best
practice?* It seems like we should be doing this DOM manipulation in the
Compile phase of the directive but there's no way to read the JSON data
there. Here's an example,
function dynamicField($compile) {
return {
restrict: 'E',
scope: {
meta: '=',
model: '='
},
link: dynamicFieldLink,
controller: 'DynamicFieldController',
controllerAs: 'vm',
bindToController: true
};
function dynamicFieldLink(scope, element) {
var template = getTemplate(scope.meta.type);
element.html(template);
$compile(element.contents())(scope);
}
function getTemplate(type) {
var template = '';
switch(type) {
case 'input':
template = '<input ng-model="vm.model" ...>';
break;
case 'select':
template = '<select ng-model="vm.model" ...></select>';
break;
}
return template;
}
}
Any help is greatly appreciated!
-Andrew
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
