Display HTML in AngularJS

Question

I have a angular coding what need insert html tags, I found out I can use ngSanitize :https://docs.angularjs.org/api/ngSanitize , but I don't whant load another library in that project.

I tried this: AngularJS : Render HTML in $scope variable in view

but I could not make work.

It's any way to do this without load another angular library?

html:

<div ng-controller="MyCtrl">
  <ul class="procedures">
    <li ng-repeat="procedure in procedures">
      <h4><a href="#" ng-click="show = !show">{{procedure.icon}}</a></h4>
      <div class="procedure-details" ng-show="show">
        <p>text here: {{procedure.text}}</p>
        <p>your number is: {{procedure.number}}</p>
        <p>price you will pay: {{procedure.price}}</p>
      </div>
    </li>
  </ul>
</div>

js:

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  $scope.procedures = [{
    icon: '<i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i>',
    text: 'test text',
    number: 1,
    price: 10000
  }];


}

jsfiddle:

http://jsfiddle.net/wD7gR/247/

Serhii Holinei · Accepted Answer · 2016-06-27T19:33:28.857

1

Starting from version 1.2.0, angular contains $sce service, that can be used to mark html as "safe"

UPDATED JSFIDDLE

angular
.module('myApp',[])
.controller('MyCtrl', function($scope, $sce) {
    $scope.procedures = [
        {
            icon: $sce.trustAsHtml('<i class="fa fa-american-sign-language-interpreting" aria-hidden="true">i am icon</i>'),
            text: 'test text',
            number: 1,
            price: 10000
        }
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <ul class="procedures">
        <li ng-repeat="procedure in procedures">
            <h4><a href="#" ng-click="show = !show" ng-bind-html="procedure.icon"></a></h4>
             <div class="procedure-details" ng-show="show">
                <p>text here: {{procedure.text}}</p>
                <p>your number is: {{procedure.number}}</p>
                <p>price you will pay: {{procedure.price}}</p>
             </div>
        </li>
    </ul>
  </div>
</div>

edited Jun 27 '16 at 19:33

answered Jun 27 '16 at 19:18

Serhii Holinei

5,758
2
32
46

thanks it is what I want but your code is broken now display the div before I click in the icon. – raduken Jun 27 '16 at 19:29
@Raduken a removed all the code, that is not related to the topic. I'm sure, you'll be able to add any logic for hide/show without a trouble ;-) – Serhii Holinei Jun 27 '16 at 19:32
@Raduken, anyway, I updated embedded code snippet with show/hide on click. – Serhii Holinei Jun 27 '16 at 19:34
@Raduken I'm really glad to help – Serhii Holinei Jun 27 '16 at 19:38

score 1 · Answer 2 · answered Jun 27 '16 at 19:19

1

Instead of using ngSanitize you can use $sce az filter like this:

Put this code in app.js :

app.filter('sce', ['$sce', function ($sce) {
    return $sce.trustAsHtml;
}]);

Then use in Html like this:

<h4><a href="#" ng-click="show = !show" ng-bind-html="procedure.icon | sce"></a></h4>

answered Jun 27 '16 at 19:19

MeTe-30

2,512
2
21
30

thanks a lot but can you should me into my code? will be possible? thank you. – raduken Jun 27 '16 at 19:30
@Raduken Sorry, don't get what you mean? – MeTe-30 Jun 27 '16 at 19:33
how can apply what you said into this code? http://jsfiddle.net/wD7gR/247/ – raduken Jun 27 '16 at 19:34
@Raduken wait a moment – MeTe-30 Jun 27 '16 at 19:36

score 0 · Answer 3 · answered Jun 27 '16 at 19:18

I can tell u that u can do like below It should be as following

$scope.html = "<i class='fa fa-american-sign-language-interpreting' aria-hidden='true'></i>";

and

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

You can do the same for for icon, text or whatever u like... I'm not sure how to do that right now cuz I'm typing this from mobile fone, i hope u will get the idea, if not plz leave comment and i'll write a full function once i get my hands on machine.

thanks, but can you should me how can apply this into my real code? I could not make work :( — raduken, Jun 27 '16 at 19:31

score 0 · Answer 4 · answered Nov 30 '17 at 09:30

0

You can use angular-sanitize to insert HTML in a view.

Example is given in plnkr

app.filter("trust", ['$sce', function($sce) {return function(htmlCode){
return $sce.trustAsHtml(htmlCode); }}]);

answered Nov 30 '17 at 09:30

Saniya syed qureshi

3,053
3
16
22

Display HTML in AngularJS

4 Answers4