Jean Jean - 1 year ago 107
AngularJS Question

create HTML inside javascript Angularjs

I'm creating HTML code inside javascript code, the problem is it doesn't recognize that it's an Angularjs code, how can I do that please ?

here is my javascript code inside a factory in Angularjs :

var table = document.createElement("table");

table.label = "";
table.label = label;

table.maj = function (current_data) {
//en tete
var thead = document.createElement("thead");
var head_tr = document.createElement("tr");
var tbody = document.createElement("tbody");
var row_tr = document.createElement("tr");
row_tr.setAttribute("ng-repeat","x in tableau");
row_tr.setAttribute("class", "ng-scope");

var th1 = document.createElement("th");
var th2 = document.createElement("th");
var th3 = document.createElement("th");
var th4 = document.createElement("th");

th1.innerHTML = "#" + "MATRICULE";
th2.innerHTML = "#" + "SEXE";
th3.innerHTML = "#" + "DIRECTION";
th4.innerHTML = "#" + "TYPE_CONTRAT";


var td1 = document.createElement("td");
td1.innerHTML = "{{x.MATRICULE}}";
var td2 = document.createElement("td");
td2.innerHTML = "{{x.SEXE}}";
var td3 = document.createElement("td");
td3.innerHTML = "{{x.DIRECTION}}";
var td4 = document.createElement("td");
td4.innerHTML = "{{x.TYPE_CONTRAT}}";



its equivalent in HTML is:

<tr ng-repeat="x in tableau">
<td>{{ x.MATRICULE }}</td>
<td>{{ x.SEXE }}</td>
<td>{{ x.DIRECTION }}</td>
<td>{{ x.TYPE_CONTRAT }}</td>

my problem is that the variables in {{}} are not recognized as Angularjs code and are put like that when I call the function from the view, even though on top of the view I have the declaration of ng-app and ng-controller on tope of the view.
Any help please ?

Answer Source

You have to inject ng-sanitize into your app and then include the ng-bind-html directive in your html in the elements you're generating from your controller.

So where you create your app module do something like:


That being said, you're doing it wrong. :)

Define the table in your html and use ng-repeat to generate the rows. I'm guessing there's something else to this, but it looks like you're trying to generate a table dynamically after some event occurs. Just put the table in your html and use ng-if to hide it until the event occurs.

Or do it in a component.

Your component html would basically just be your table layout like you're generating in the factory code stored in tableauComponent.html.

    <tr ng-repeat="x in">
        <td>{{ x.MATRICULE }}</td>
        <td>{{ x.SEXE }}</td>
        <td>{{ x.DIRECTION }}</td>
        <td>{{ x.TYPE_CONTRAT }}</td>

The component would get registered with your app with something like this:

angular.module("myApp").component("tableauComponent", {
    templateUrl: 'tableauComponent.html',
    controller: tableauController,
    controllerAs: 'tableau'

function tableauController() {
    var ctrl = this; = service call to get your data here.