Hello.
I am trying to see if something like this is possible. I have an application written in GWT that I wanted to port over to ionic framework, and I am literally stuck at one requirement.
The screen elements are basically a json data that has all the elements information. For example, one element definition looks something like this.
{
“name”:“lblORN”,
“value”:“Other Reference Number:”,
“type”:“Label”,
“xpos”:10,
“ypos”:40,
“width”:240,
“height”:20,
“tabOrder”:0,
“fontFamily”:“Tahoma”,
“fontSize”:“9”,
“foreColor”:“Black”,
“backColor”:null,
“fontStyleBold”:false,
“fontStyleItalic”:false,
“fontStyleUnderline”:false,
“maxEntries”:1,
“selectedOption”:null,
“paramValue”:[
],
“toolTip”:null,
“gridWidget”:null,
“skipBranding”:false
}
In short, the screen is made of these different element widgets that I need to want to dynamically create the values.
I am guessing the directives is the way to go…
Then, I can define the “element directive something along this line”…
angular.module(‘depDirectives’, [])
.directive(‘element’, function () {
return {
restrict: ‘E’,
link: function (scope, element, attrs) {
element.addClass(‘element’);
scope.$watch(attrs.x, function (x) {
element.css('left', x + 'px');
});
scope.$watch(attrs.y, function (y) {
element.css('top', y + 'px');
});
scope.$watch(attrs.w, function (w) {
element.css('width', w + 'px');
});
scope.$watch(attrs.h, function (h) {
element.css('height', h + 'px');
});
scope.$watch(attrs.fore-color, function (color) {
element.css('foregroundColor', color);
});
scope.$watch(attrs.back-color, function (color) {
element.css('backgroundColor', color);
});
}
};
}
);
Now, the problem where I am clueless is how to create the html inputs dynamically.
For example, if the screen type is label, I just want to put it in <label>.
If the type is “textbox”, I need to create ’<input type="text" ..."
You got the idea…
All the examples that I saw, the template is basically hard coded… How can I generate the html at runtime, depending on the types of screen element?