create HTML inside javascript Angularjs

Question

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 ?

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 ?

I can't help but think you are missing the usefulness of Angular. — Dan
– Dan, Commented May 26, 2016 at 13:10
You have the ng-app and ng-controller in the html. Did you define the app and controller in a js file? — Robert Broden
– Robert Broden, Commented May 26, 2016 at 13:15
@RobertBroden yes I did but even though the html is inside the portion linked to the ng-controller, it doesn't consider the HTML as angularJS code — Jean
– Jean, Commented May 26, 2016 at 13:18

Mike Feltman · Accepted Answer · 2016-05-26 13:32:51Z

1

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. 
}

Then whereever you want this baby to show in your html you just use:

<tableau-component></tableau-component>

edited May 26, 2016 at 13:32

answered May 26, 2016 at 13:12

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jean Over a year ago

I know, the right way is what I did before my boss tells me to do the same but create it in a Factory because he wants the code to be reusable ..

Mike Feltman Over a year ago

Fire your boss! If you want a table to be reusable, create it in a component or directive, not a factory.

Jean Over a year ago

it doesn't work, because I'm defining the HTML in the Factory not in the Controller

Jean Over a year ago

Can you tell me please how it can be done in a component ?

Jean Over a year ago

Thank you , even though this is what I did in the first place and wasn't approved ...

|

Collectives™ on Stack Overflow

create HTML inside javascript Angularjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related