Jean Jean - 6 months ago 36
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 = "";
if(label){
table.label = label;
}

table.maj = function (current_data) {
while(this.firstChild){
this.removeChild(this.firstChild);
}
//en tete
var thead = document.createElement("thead");
var head_tr = document.createElement("tr");
//contenu
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";


head_tr.appendChild(th1);
head_tr.appendChild(th2);
head_tr.appendChild(th3);
head_tr.appendChild(th4);


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}}";


row_tr.appendChild(td1);
row_tr.appendChild(td2);
row_tr.appendChild(td3);
row_tr.appendChild(td4);




tbody.appendChild(row_tr);
thead.appendChild(head_tr);
this.appendChild(thead);
this.appendChild(tbody);


its equivalent in HTML is:

<table>
<tr>
<th>Matricule</th>
<th>Sexe</th>
<th>Direction</th>
<th>Type_contrat</th>
</tr>
<tr ng-repeat="x in tableau">
<td>{{ x.MATRICULE }}</td>
<td>{{ x.SEXE }}</td>
<td>{{ x.DIRECTION }}</td>
<td>{{ x.TYPE_CONTRAT }}</td>
</tr>
</table>


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

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:

angular.module('myApp',[ngSanitize])

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.

<table>
    <tr>
    <th>Matricule</th>
    <th>Sexe</th>
    <th>Direction</th>
    <th>Type_contrat</th>
    </tr>
    <tr ng-repeat="x in tableau.data">
        <td>{{ x.MATRICULE }}</td>
        <td>{{ x.SEXE }}</td>
        <td>{{ x.DIRECTION }}</td>
        <td>{{ x.TYPE_CONTRAT }}</td>
    </tr>
</table>

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;
    this.data = service call to get your data here. 
}