Is there a way to dynamically insert an ng-include element into an HTML page and have it function properly?
I am working on a Drag N Drop application where users can drag an element onto the page, and upon dropping it in the designated zone, the original element is replaced with a more detailed one. For example, dragging a box labeled "Calendar" would display an actual calendar once dropped. It's important to note that this new element is generated and added to the DOM only after the drop event.
After the element is dropped, I am aiming to replace it with a specific chunk of HTML code as shown below. Currently, the markup is hardcoded within a string, which is not ideal:
<div class='panel panel-default'>
<div class='panel-heading'>
<h3 class='panel-title'>
<span class='glyphicon glyphicon-remove'></span>
WIDGET NAME
<spanclass='glyphicon glyphicon-cog'></span>
</h3>
</div>
<div class='widgetContainer' ng-include="'widgets/widget.html'"></div>
</div>
However, when this HTML is inserted into the page, the referenced HTML file specified in ng-include is not actually included.
My desired outcome is to load an external HTML file containing the widget markup and include it at the correct position. As a beginner in Angular, I'm unsure if this issue is due to:
- The lack of support for dynamically adding ng-include elements
- A need for additional controller logic to handle this process
- Possibly using the tag instead of the attribute
- This functionality simply not being feasible.
Please share examples and solutions as I am still learning Angular.
Thank you.
UPDATE
The code snippet responsible for generating the HTML to be dynamically added to the page is as follows:
$("#template").append(
" \
<div class='panel panel-default'>\
<div class='panel-heading'>\
<h3 class='panel-title'>\
<span style='padding-right: 10px; cursor:pointer;' class='glyphicon glyphicon-remove' onclick='removeElement(this)'></span>\
" + widgetDetail['serviceName'] + "\
<span style='float:right; cursor:pointer;' class='glyphicon glyphicon-cog' onclick='toggleWidgetDetail(this)'></span>\
</h3>\
</div>\
<div class='markupContainer' ng-include=\"'widgets/" + id +".html'\"></div>\
</div>\
"
);
You can find the complete code on GitHub. The drag-and-drop functionalities are currently implemented using HTML5 JavaScript, located in the file
/public/javascripts/js_dragndrop.js/public/javascripts/jq_dragndrop.jsThis project is in the prototyping phase, so expect some rough code as I experiment with DragNDrop elements.