ng sanitize don't show svg tag angularjs

Question

I have this code

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

app.controller('myController', function($scope) {
    $scope.html = ['<div class="text-color">Your html code</div>',
                  '<div class="text-color">2nd div</div>',
                   '<div class="text-color">3rd div </div>',
                   '<svg width="100" height="100"><rect width="50px" height="50px" x="30" y="30"/></svg>'
                  ];
});

<div ng-app="myApp">
    <div ng-controller="myController">
        <span ng-repeat="div in html">
         <p ng-bind-html="div"></p>
        </span>
    </div>
</div>

Problem is it don't show svg tag saved in my controller

score 2 · Answer 1 · answered May 17 '15 at 09:41

use $sce.trustAsHtml

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

app.controller('myController', function($scope, $sce) {
    $scope.html = ['<div class="text-color">Your html code</div>',
                  '<div class="text-color">2nd div</div>',
                   '<div class="text-color">3rd div </div>',
                   $sce.trustAsHtml('<svg width="100" height="100"><rect width="50px" height="50px" x="30" y="30"/></svg>')
                  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>


<div ng-app="myApp">
    <div ng-controller="myController">
        <span ng-repeat="div in html">
         <p ng-bind-html="div"></p>
        </span>
    </div>
</div>

$sce Docs

ng sanitize don't show svg tag angularjs

1 Answers1