EDIT: I have created a solution sample based on the initial answer. However, I am open to further suggestions and would appreciate any help in filling the gaps in my knowledge (please refer to the comments). plnkr.co/edit/mqGCaBHptlbafR0Ue17j?p=preview
ORIGINAL POST
Greetings to all Angular enthusiasts,
I am currently working on developing a tool for constructing simple web pages using a predefined set of elements. The user will be able to design the layout by selecting which elements appear in what order (around 20-30 different elements to choose from). Here's an example layout:
Heading
Paragraph
Paragraph
Subheading
Barchart
Paragraph
...and so forth
Behind the scenes, there will be an array of JavaScript objects:
var page_structure = [
{type: "heading", content: "The final exam - details" },
{type: "paragraph", content: "Lorem ipsum dolor sit amet..." },
{type: "paragraph", content: "Lorem ipsum dolor sit amet..." }
...
{type: "bar chart", y: "Grades", colour: "blue" }
...
];
The user will input parameters such as content, variable, color, etc., for each individual element.
THE ISSUE
I am struggling to figure out how to render these elements on the page while ensuring that the dynamic parameters for each element are correctly included.
Each element type (heading, paragraph, bar chart, or any other possible element) has its own HTML template, which must be able to dynamically display user-defined parameters. I believe I need something along these lines:
var templates = {
heading: "<h1>USER_CHOSEN_PARAMETER_HERE</h1>",
paragraph: "<p>USER_CHOSEN_PARAMETER_HERE</p>"
...
};
I am utilizing Angular's ng-repeat directive to render each element. I have tried implementing ng-html-bind...
<div ng-repeat="x in page_structure track by $index">
<div ng-bind-html="templates[x.type]"></div>
</div>
...or a custom directive called 'mycomponent':
<div ng-repeat="x in page_structure track by $index">
<div mycomponent component='x'></div>
</div>
Both methods work smoothly when there are no user-defined parameters in the templates. However, I am unable to incorporate the parameters. With ng-bind-html, I attempted using expression markup like this:
var templates = {
heading: "<h1>{{x.content}}</h1>",
paragraph: "<p>{{x.content}}</p>",
...
};
(I typically define the templates in the app controller constructor, so it's $scope.templates = { blah blah } to be more specific.)
Instead of rendering the dynamic variables as intended, the actual webpage displays curly braces and "x.content". How can I reference a dynamically variable parameter within an ng-html-bind template, or is it even feasible?
I also explored the custom directive route, defining the directive as:
.directive('mycomponent', function() {
return {
scope: { component: "=" },
template: templates[component.type]
}; )
This approach led to confusion as I struggled to identify how to reference a dynamic parameter inside the template. Apologies for not being able to provide a clear example of what I attempted to achieve.
Any assistance or functional examples of the techniques I should employ here would be highly appreciated. Feel free to request additional information if necessary (as this is my first post on SO, I am still learning how to structure questions effectively).