NewBoy NewBoy - 5 months ago 30
JSON Question

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

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>

Answer

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>