Wie html5 Audio/Video als Ausgabe innerhalb angular Filter zurückgeben

Question

Ich habe diesen Code, die einige spezielle Text herausfiltern und gibt Audio-Element, aber es funktioniert nicht nur mit HTML5 Audio/Video-Element, wie kann ich es beheben (es funktioniert mit allen anderen HTML-Tags für zB: h1 tag etc)?

angular.module('demo', ['ngSanitize']); 
 
angular.module('demo').filter('toAudSrc',function(){ 
 
    return function (text) { 
 
     regex = /^\*\*\*!(.*)!\*\*\*$/; 
 
     if(regex.test(text)) 
 
      return text.replace(/^\*\*\*!(.*)!\*\*\*$/,'<audio width="200" controls preload>'+ 
 
     '<source src="http://www.w3schools.com/html/horse.ogg" type="audio/mp3">'+ 
 
     '</audio>'); 
 
     else 
 
      return text; 
 
    } 
 
}); 
 
angular.module('demo').controller('MyController', ['$scope', function($scope) { 
 
    $scope.greeting = '***!Hola!***'; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.5/angular-sanitize.min.js"></script> 
 
<div ng-app='demo'> 
 
<div ng-controller="MyController"> 
 
    <h3 ng-bind-html="greeting | toAudSrc"></h3> 
 
</div> 
 
</div>

Answer 1

Okay, las ich die Dokumentation wieder und diese Lösung gefunden, für alle, die ähnliches Problem hat

angular.module('demo', ['ngSanitize']); 
 
angular.module('demo').filter('toAudSrc',function($sce){ 
 
    return function (text) { 
 
     regex = /^\*\*\*!(.*)!\*\*\*$/; 
 
     if(regex.test(text)) 
 
      return $sce.trustAsHtml(text.replace(/^\*\*\*!(.*)!\*\*\*$/,'<audio width="200" controls preload>'+ 
 
     '<source src="http://www.w3schools.com/html/horse.ogg" type="audio/mp3">'+ 
 
     '</audio>')); 
 
     else 
 
      return text; 
 
    } 
 
}); 
 
angular.module('demo').controller('MyController', ['$scope', function($scope) { 
 
    $scope.greeting = '***!Hola!***'; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.5/angular-sanitize.min.js"></script> 
 
<div ng-app='demo'> 
 
<div ng-controller="MyController"> 
 
    <h3 ng-bind-html="greeting | toAudSrc"></h3> 
 
</div> 
 
</div>