0

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);

Luke
  • 33
  • 1
  • 5
  • It's not clear to me what you're asking. Please revise to better describe what you're trying to accomplish and in what way it's not working. – isherwood Jan 23 '19 at 19:43
  • what are the attributes you are trying to set? – Naga Sai A Jan 23 '19 at 19:44
  • 1
    By the way, one of the core tenets of AngularJS is to not directly modify the DOM. See https://stackoverflow.com/a/15012542/1264804. Your table should have an ngRepeat directive on it and you should only be modifying the data object that it consumes. – isherwood Jan 23 '19 at 19:46
  • updated question with more info – Luke Jan 23 '19 at 20:04

0 Answers0