2

I have a variable in scope result.questionText it contains <i>How many times are the hands of a clock </i>at right angle in a day?<audio controls ng-src="media/abc.mp3"></audio> ,i want to display html audio component instead of that audio tag so i write like this in my html page,

<span class="row pull-left" ng-bind-html="result.questionText"></span>

but it is showing text before audio tag but not showing audio component. I have tried to put img tag and it is working fine.

Any Idea?

Raj Kantaria
  • 326
  • 3
  • 12

1 Answers1

0

Seems like you have to use $sce.trustAsResourceUrl. See this for examples.

Community
  • 1
  • 1
gorpacrate
  • 5,109
  • 3
  • 21
  • 18
  • thanx for comment...but there is no change in o/p.. :( – Raj Kantaria Jul 28 '14 at 10:08
  • If to have a look into angular source, it uses `element.html($sce.getTrustedHtml(parsed(scope)) || '');` in ng-bind-html directive. So you should set the path to audio content ('media/abc.mp3') as trusted at first: `$scope.audioSource = $sce.trustAsResourceUrl('media/abc.mp3');` and ` – gorpacrate Jul 28 '14 at 10:15
  • Also [there is](http://jsfiddle.net/djqck/1/) a fine example of setting `$sce.trustAsResourceUrl` via `Filter`. I hope it became clearer now. – gorpacrate Jul 28 '14 at 10:17
  • 2
    Got the answer `$scope.result.questionText = $sce.trustAsHtml($scope.result.questionText);` works for me. – Raj Kantaria Jul 28 '14 at 11:09