Raduken Raduken - 5 months ago 9
AngularJS Question

Display HTML in AngularJS

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/

Answer

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>