I am a newbie at AngularJS. I'm trying to set attributes properly to JavaScript generated html code but every attempt so far has failed.
My code (excluding my failed attempts): https://codepen.io/walkerdude5/pen/JxjgqP?editors=1010
angular
.module("MyApp", ["ngMaterial", "ngMessages", "material.svgAssetsCache"])
.controller("AppCtrl", function($compile, $scope, $mdDialog) {
$scope.showPrompt = function(ev) {
var confirm = $mdDialog
.prompt()
.title("Note Editor")
.placeholder("New Note")
.targetEvent(ev)
.ok("Save")
.cancel("Discard");
$mdDialog.show(confirm).then(function(result) {
$scope.variable = "update note function";
});
};
});
table = document.getElementById("example2");
tr = table.insertRow(0);
tr.insertCell(0);
tr.insertCell(1);
tr = table.insertRow(0);
tr.insertCell(0);
tr.insertCell(1);
table.rows[0].cells[0].innerHTML = "dummyContent1";
table.rows[1].cells[0].innerHTML = "dummyContent2";
table.rows[0].cells[1].innerHTML = "dummyContent3";
var angularTD = table.rows[1].cells[1];
//prompt dialog functionality in this cell
HTML
<table>
<tbody id="example2">
</tbody>
</table>
<!-- what I want to be able to do -->
<div ng-controller="AppCtrl" ng-app="MyApp">
<button ng-click="showPrompt($event)">
Prompt Dialog
</button>
</div>
Edit: I pasted one my attempts, basically what I am trying to do is create a button with ng-click attribute, append the butotn to a div with ng-controller and app attributes, and append the div to a TD created and accessed through JavaScript. The TD must be created through javascript because the number of TD created is dependent on web socket data.
var angdiv= document.createElement("DIV");
angdiv.setAttribute("ng-controller","AppCtrl");
angdiv.setAttribute("app","MyApp");
var btn = document.createElement("BUTTON");
btn.setAttribute("ng-click","showPrompt($event)");
btn.innerHTML='View';
angdiv.appendChild(btn);
td.appendChild(angdiv);