нг Sanitize не показывают SVG тега angularjs

Question

У меня есть этот код

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>

Проблема заключается в том, что не показывает svg тега сохраняется в моем контроллере

Answer 1

Используйте $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