use html in angularjs controller

Question

I have html theat I want to use in angularjs controller controller. My problem is to escape the html in the angularjs controller. Here is my snippet

function($scope) {
     $scope.data=  <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>$rootScope.firstname</td>
                <td>$rootScope.lastname</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>$rootScope.firstname1</td>
                <td>$rootScope.lastname1</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>$rootScope.firstname2</td>
                <td>$rootScope.lastname2</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>;

how can I pass the table html and the root scope data into scope.data variable

Firstly - will be better if you will store you data as array and not as separated fields. This will give you a chance to access data from root scope only once and set them to scope. Like: $scope.userData = $rootScope.userData and then you will be able to use ng repeat for this cells and you will no need to use html in controller. — iliya.rudberg
– iliya.rudberg, Commented Nov 12, 2018 at 9:33

Dilip Belgumpi · Accepted Answer · 2018-11-12 09:23:08Z

1

Just concatenate $rootScope fields then append it to any html div element

  function($scope) {
     $scope.data= '<table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>'+$rootScope.firstname+'</td>
                <td>'+$rootScope.lastname+'</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>'+$rootScope.firstname1+'</td>
                <td>'+$rootScope.lastname1+'</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>'+$rootScope.firstname2+'</td>
                <td>'+$rootScope.lastname2+'</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>';

EDIT:

var app=angular.module("testProject",[]);

app.controller("TestController", function($scope, $rootScope) {
  
$rootScope.firstname="firstname";
$rootScope.lastname="lastname";
$rootScope.firstname1="firstname1";
$rootScope.lastname1="lastname1";
$rootScope.firstname2="firstname2";
$rootScope.lastname2="lastname2";

     $scope.data= '<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr></thead> <tbody> <tr> <td>1</td><td>'+$rootScope.firstname+'</td><td>'+$rootScope.lastname+'</td><td>@mdo</td></tr><tr> <td>2</td><td>'+$rootScope.firstname1+'</td><td>'+$rootScope.lastname1+'</td><td>@fat</td></tr><tr> <td>3</td><td>'+$rootScope.firstname2+'</td><td>'+$rootScope.lastname2+'</td><td>@twitter</td></tr></tbody> </table>';
     $("#data_table").append($scope.data);
          
          
          });

<html  ng-app="testProject">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


<div  ng-controller="TestController" id="data_table"></div>


</html>

edited Nov 12, 2018 at 9:23

answered Nov 12, 2018 at 9:09

Dilip Belgumpi

6484 silver badges13 bronze badges

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

2 Comments

user10445503 Over a year ago

I am getting unxepected token at this line $scope.data= '<table class="table">

user10445503 Over a year ago

Uncaught SyntaxError: Invalid or unexpected token

Vlado Pandžić · Accepted Answer · 2018-11-12 09:08:35Z

0

Save it as string like this:

 $scope.data='<html><div></div></html>'

Then when you want to render it use ng-bind-html like this:

 <div>
   <p ng-bind-html="data"></p>
 </div>

answered Nov 12, 2018 at 9:08

Vlado Pandžić

5,0758 gold badges50 silver badges82 bronze badges

1 Comment

user10445503 Over a year ago

please include the entire html used

Collectives™ on Stack Overflow

use html in angularjs controller

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related