In the process of developing an application using Angular, I encountered a scenario where I needed to fetch and display data from a web service. The challenge was in dynamically creating div elements with the retrieved data:
for(var i = 0 ; i < data.Output.length ; i++){
var listItem = document.createElement("div");
listItem.setAttribute("ng-click","doMove()");
listItem.className = "list-item";
var name = document.createElement("span");
name.className = "name"
name.appendChild(document.createTextNode(data.Output[i].name));
var link = document.createElement("a");
link.appendChild(document.createTextNode('›'));
listItem.appendChild(name);
listItem.appendChild(link);
wrapper.appendChild(listItem);
}
However, I discovered that clicking on these dynamically created divs did not trigger the intended function.
UPDATE: It's worth noting that the data being fetched is through an HTTP request.
UPDATE 2: These dynamic div elements are appended into the following container:
<div id = "wrapper">
--->
</div>
To retrieve the data within the controller, I use the following approach:
var request = $http({
method: "post",
url: url",
data: data,
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
});
request.success(function (data) {
});