How to use HTML tags/Attributes in JSON file with Angular

Question

I have a JSON file which has a html tags place in the objects. Is it possible to use this HTML attributes?

JS

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

app.controller('mainCtrl', function ($scope) {
    $scope.colors = [
        {
            "color": "red",
            "value": "#f00",
            "message": "Simple message"
        },
        {
            "color": "green",
            "value": "#0f0",
            "message": "Message with <strong>HTML</strong> tags"
        },
        {
            "color": "blue",
            "value": "#00f",
            "message": "Am I going to work? I should not!"
        },
        {
            "color": "magenta",
            "value": "#f0f",
            "message": "<img src='https://c2.staticflickr.com/4/3684/11803460685_dd40050e8e_h.jpg'>"
        }
    ]

    $scope.currentMessage = "";

    $scope.popupBtn = function (message) {

        // set current message
        $scope.currentMessage = message;

        // if popup is not open, open it
        if (!($scope.popupBlcok)) {
            $scope.popupBlock = true;
        }
    }

});

CSS

.alert-block {
  background-color: coral;
  color: white;
  display: none;
 }

  .popup-container {
     display: block;
   }

HTML

<body ng-app="app">
    <div ng-controller="mainCtrl">
        <ul class="block-elements">
            <li ng-repeat="details in colors">
                <button ng-click="popupBtn(details.message)" ng-style="{ color: details.color }">Click Me</button>
            </li>
        </ul>

        <div class="alert-block" ng-class="{'popup-container': popupBlock}">
            <div>
                <a>{{currentMessage}}</a>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
    </div>
</body>

Shashank Agrawal · Accepted Answer · 2016-07-04 13:14:39Z

You need to use $sce along with ng-bind-html. So, you should first replace:

<a>{{currentMessage}}</a>

with

<a ng-bind-html="currentMessage"></a>

and in the popupBtn scope method:

$scope.currentMessage = $sce.trustAsHtml(message);

The above will force Angular to trust your HTML snippet for cross side scripting.

Here you go:

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

app.controller('mainCtrl', function($scope, $sce) {
  $scope.colors = [{
    "color": "red",
    "value": "#f00",
    "message": "Simple message"
  }, {
    "color": "green",
    "value": "#0f0",
    "message": "Message with <strong>HTML</strong> tags"
  }, {
    "color": "blue",
    "value": "#00f",
    "message": "Am I going to work? I should not!"
  }, {
    "color": "magenta",
    "value": "#f0f",
    "message": "<img src='https://c2.staticflickr.com/4/3684/11803460685_dd40050e8e_h.jpg'>"
  }]

  $scope.currentMessage = "";

  $scope.popupBtn = function(message) {

    // set current message
    $scope.currentMessage = $sce.trustAsHtml(message);

    // if popup is not open, open it
    if (!($scope.popupBlcok)) {
      $scope.popupBlock = true;
    }
  }

});

<body ng-app="app">
  <div ng-controller="mainCtrl">
    <ul class="block-elements">
      <li ng-repeat="details in colors">
        <button ng-click="popupBtn(details.message)" ng-style="{ color: details.color }">Click Me</button>
      </li>
    </ul>

    <div class="alert-block" ng-class="{'popup-container': popupBlock}">
      <div>
        <a ng-bind-html="currentMessage"></a>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
  </div>
</body>

codeandcloud · Accepted Answer · 2016-07-04 13:20:41Z

0

Try this for displaying html attribute

<div ng-bind-html="currentMessage"></div>

edited Jul 4, 2016 at 13:20

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

answered Jul 4, 2016 at 12:53

Niketan Raval

4792 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to use HTML tags/Attributes in JSON file with Angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related