Dynamically generating widgets from json data without performance losses - angularjs

Question

Here is the problem I'm trying to solve: generating a form from a variable set of widgets where the exact widgets and their ordering is directed by the data, namely schema. The first approach I've taken looks like (omitting the unnecessary details):
controller.js:
angular.module('app').controller(function($scope) {
$scope.data = {
actions: [{
name: 'Action1',
base: 'nova.create_server',
baseInput: {
flavorId: {
title: 'Flavor Id',
type: 'string'
},
imageId: {
title: 'Image Id',
type: 'string'
}
},
input: [''],
output: [{
type: 'string',
value: ''
}, {
type: 'dictionary',
value: {
key1: '',
key2: ''
}
}, {
type: 'list',
value: ['', '']
}]
}]
};
$scope.schema = {
action: [{
name: 'name',
type: 'string',
}, {
name: 'base',
type: 'string',
}, {
name: 'baseInput',
type: 'frozendict',
}, {
name: 'input',
type: 'list',
}, {
name: 'output',
type: 'varlist',
}
]
};
})
template.html
<div ng-controller="actionCtrl" ng-repeat="item in data.actions">
<div ng-repeat="spec in schema.action" ng-class="{'right-column': $even && isAtomic(spec.type), 'left-column': $odd && isAtomic(spec.type)}">
<typed-field></typed-field>
<div class="clearfix" ng-show="$even"></div>
</div>
</collapsible-panel>
directives.js
.directive('typedField', function($http, $templateCache, $compile) {
return {
restrict: 'E',
scope: true,
link: function(scope, element, attrs) {
$http.get(
'/static/mistral/js/angular-templates/fields/' + scope.spec.type + '.html',
{cache: $templateCache}).success(function(templateContent) {
element.replaceWith($compile(templateContent)(scope));
});
}
}
})
Among the templates located inside '/fields/' the simplest possible template for the string-type field is
<div class="form-group">
<label>{$ spec.title || makeTitle(spec.name) $}</label>
<input type="text" class="form-control" ng-model="item[spec.name]">
</div>
This approach works for - all the widgets are rendered, model bindings work, but on once I type a single letter inside of these widgets, the scope changes and the widgets are redrawn, causing:
* focus losing
* some time delay effective meaning poor performance.
Trying to overcome this drawback, I've rewritten my app in the following way:
template.html
<div ng-controller="actionCtrl" ng-repeat="item in data.actions">
<action></action>
</div>
directives.js
.directive('typedField', function($http, $templateCache, idGenerator, $compile) {
return {
restrict: 'E',
scope: true,
compile: function ($element, $attrs) {
$http.get(
'/static/mistral/js/angular-templates/fields/' + $attrs.type + '.html',
{cache: $templateCache}).success(function (templateContent) {
$element.replaceWith(templateContent);
});
return function (scope, element, attrs) {
scope.title = $attrs.title;
scope.type = $attrs.type;
scope.name = $attrs.name;
}
}
}
})
.directive('action', function($compile, schema, isAtomic) {
return {
restrict: 'E',
compile: function(tElement, tAttrs) {
angular.forEach(
schema.action,
function(spec, index) {
var cls = '', elt;
if ( isAtomic(spec.type) ) {
cls = index % 2 ? 'class="right-column"' : 'class="left-column"';
}
elt = '<div ' + cls + '><typed-field type="' + spec.type + '" name="' + spec.name + '"></typed-field>';
if ( index % 2 ) {
elt += '<div class="clearfix"></div>';
}
elt += '</div>';
tElement.append(elt);
});
return function(scope, element, attrs) {
}
}
}
})
Instead of getting schema from scope, I'm providing it via dependency injection into compile phase of a directive (which is run only the first time - which seemed quite the thing I needed to avoid repetitive full redraw of widgets). But now instead of nicely looking widgets (as before) I get raw html with data bindings not evaluated at all. I guess that I'm doing something wrong, but fail to graps how should I correctly use the compile function to avoid performance issues. Could you please give an advice on what should be fixed?

Answer 1

Finally I have found out what should be returned from the directive's compile function in that case
.directive('action', function($compile, schema, isAtomic) {
return {
restrict: 'E',
compile: function(tElement, tAttrs) {
angular.forEach(
schema.action,
function(spec, index) {
var cls = '', elt;
if ( isAtomic(spec.type) ) {
cls = index % 2 ? 'class="right-column"' : 'class="left-column"';
}
elt = '<div ' + cls + '><typed-field type="' + spec.type + '" name="' + spec.name + '"></typed-field>';
if ( index % 2 ) {
elt += '<div class="clearfix"></div>';
}
elt += '</div>';
tElement.append(elt);
});
var linkFns = [];
tElement.children().each(function(tElem) {
linkFns.push($compile(tElem));
});
return function(scope) {
linkFns.forEach(function(linkFn) {
linkFn(scope);
});
}
}
}
})
What actually $compile does is calling the 'compile' function of each directive it encounters - thus calling $compile on current directive's template lead to infinite recursion, but calling it for each child of this directive worked fine.