One of the challenges I'm facing is with a for loop in my JavaScript:
for (var i=0;i<2;i++) {
$scope.widget = widgets[i];
$scope.header = widgets[i].data.header;
$scope.items = widgets[i].data.items;
$scope.footer = widgets[i].data.footer;
var widget = widgets[i];
var div1 = '<div id="' + widget.id + '" class="' + widget.width +'" >';
var div2 = '<div class="panel" style="background-color:' + widget.color +';color:white;">';
var header = widget.body.headerTemplate;
var panelStart = '<div class="panel-collapse pull out">';
var widgetBody = widget.body.itemTemplate;
var widgetFooter = widget.body.footerTemplate;
var panelEnd = '</div>';
var div2End = '</div>';
var div1End = '</div>';
var widgetHTML = div1 + div2 + header + panelStart + widgetBody + widgetFooter + panelEnd + iv2End +iv1End;
console.log(widgetHTML);
var linkingFunction = $compile(widgetHTML);
var elem = linkingFunction($scope);
$(elem).appendTo("#widgetsContainer");
}
It appends HTML to a div container, containing data-binding such as:
<a href='{{header.redirectUri}}'>{{header.title}}</a>
However, as the $scope variables change with each iteration, the HTML updates with the latest values by the end. Is there a way to prevent the HTML from updating after it has been initially drawn?