0

I am currently writing an AngularJS application, and I would like to append or make the value under $scope as an HTML tag value instead of a regular value.

HTML:

<div gridster="gridsterOptions">
        <ul>
            <li gridster-item="widget" ng-repeat="widget in dashboard.widgets"  class="main-dashboard-container">
                <div class="box" ng-controller="CustomWidgetCtrl">
                    <div class="box-header main-dashboard-header">
                        <h4>{{ widget.name }}</h4>
                        <div class="box-header-btns pull-right">
                            <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
                            <a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
                        </div>
                    </div>
                    <div class="box-content main-dashboard-content">{{ widget.content }}</div>
                </div>
            </li>
        </ul>
    </div>

AngularJS Code:

$scope.dashboards = {
            '1': {
                id: '1',
                name: 'Home',
                widgets: [{
                    col: 0,
                    row: 0,
                    sizeY: 1,
                    sizeX: 1,
                    name: "URL Filter",
                    content:'<div class="table-responsive " ng-controller="URLFilterCategoriesController as viewAll"><table class="table table-hover"><thead><tr><td>Categories</td><td>Hits</td></tr></thead><tbody><tr ng-repeat="urlfil in viewAll.urlfiltercat"><td>{{urlfil.category}}</td><td>{{urlfil.hit}}</td></tr></tbody></table></div>'
                }, {
                    col: 2,
                    row: 1,
                    sizeY: 1,
                    sizeX: 1,
                    name: "Widget 2"
                }]
            },

As you can see under the AngularJS code, I've added series of html codes and that I would like it to be appended/added as HTML inside my HTML codes. Thanks!

Huangism
  • 16,278
  • 7
  • 48
  • 74
bluestella
  • 383
  • 2
  • 6
  • 17

1 Answers1

0

Use the ng-bind-html directive

You might want to look at these two links:

https://docs.angularjs.org/api/ng/directive/ngBindHtml

With ng-bind-html-unsafe removed, how do I inject HTML?

Community
  • 1
  • 1
Joao Leal
  • 5,533
  • 1
  • 13
  • 23