Can't Interpolate Error With Iframe And Ng-src In AngularJS 1.x

Posted By Weston Ganger

If you have ever tried to use an iframe, video or media element tag with a external site as source you have probably seen the Can't interpolate error. Heres two simple methods to get this working for you.

Method 1: Simple & Hackish

.config(function($sceDelegateProvider){
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    "http://www.youtube.com/embed/**"
  ]);
})

Now you can use any url from youtube.com/embed/* or this domain.

<pre>
<code class="language-markup">
<!-- Assuming mainVideoUrl == 'http://www.youtube.com/embed/'-->
<iframe ng-src='{{ mainVideoUrl + video.filename }}'>
</iframe>



Related External Links:

- [Google Groups - iFrame with ng-src says can't interpolate](https://groups.google.com/forum/#!topic/angular/E4UCjMkePao)

Article Topic:Software Development - Javascript

Date:November 17, 2016