Angular js scope var value in iframe

Question

I am working with angular js . I have a controller "youTubePlayerCtrl", in this controller i have $scope.videoID which contains the youtube video id. I am able to get this value in belows div in h1 block . but i am not able to get {{videoID}} in iframe, can any one help me how to fix this.

<div ng-controller="youTubePlayerCtrl">
    <h1>{{videoID}}</h1>
    <iframe class="youtube-player" type="text/html" width="auto"
        height="auto" src="http://www.youtube.com/embed/{{videoID}}"
        allowfullscreen frameborder="0"> </iframe>
</div>

This is the error log:

[$interpolate:noconcat] http://errors.angularjs.org/undefined/$interpolate/noconcat?p0=http%3A%2F%2Fwww.youtube.com%2Fembed%2F%7B%7BvideoID%7D%7D at Error () at http://code.angularjs.org/1.2.0-rc.2/angular.min.js:6:453 at g (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:69:467) at b.push.compile (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:54:6) at l (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:47:124) at f (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:41:361) at l (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:47:64) at f (http://code.angularjs.org/1.2.0-rc.2/angular.min.js:41:361) at http://code.angularjs.org/1.2.0-rc.2/angular.min.js:40:434 at http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js:7:148 angular.js:7861 (anonymous function)

Jsfiddle (not working)

Thanx

Try `ng-src` : `ng-src="http://www.youtube.com/embed/{{videoID}}"` — Ivan Chernykh, Oct 10 '13 at 07:20
@Cherniv What is the difference between them ng-src & src ? just a question . — Anurag-Sharma, Oct 10 '13 at 07:21
@Anurag-Sharma from documentation: *Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.* — Ivan Chernykh, Oct 10 '13 at 07:21
This is the error log : Error: [$interpolate:noconcat] [$interpolate:noconcat] http://errors.angularjs.org/undefined/$interpolate/noconcat?p0=http%3A%2F%2Fwww.youtube.com%2Fembed%2F%7B%7BvideoID%7D%7D at Error () — ARV, Oct 10 '13 at 07:28
@ArunPJohny it is only showing the youtube player but not playing video. — ARV, Oct 10 '13 at 07:32
@ArunPJohny yes , i checked that, it is working. but why it is not working for my case. — ARV, Oct 10 '13 at 07:40
i checked your code on my Ide and it is not working. dont know why, it is well running on jsfiddle, i copied the same code. can you tell me what angular js files i have to put in my page. — ARV, Oct 10 '13 at 09:21
@mb21 I reserched and found that when i am usining my module with ngRoute And ngSanitize then it is not playing video . var app = angular.module('my-app', ['ngRoute', 'ngSanitize'], function () { }) — ARV, Oct 10 '13 at 11:27
There is the solution: http://stackoverflow.com/questions/19312045/angularjs-with-i-frame — Sergey Chepurnov, Dec 18 '13 at 07:09

Vanni Totaro · Accepted Answer · 2013-10-28T17:36:53.977

First: you need to use ng-src instead of src as @Cherniv suggested in a comment to your question. Read more here.

Second: you cannot concatenate the URL inside the source attribute for security reasons: you must concatenate the URL in Javascript in a scope variable e.g. fullURL and then ng-src="{{fullURL}}". Read more here.

Third: if Strict Contextual Escaping (SCE) is enabled ‒ and Angular v1.2 ships with SCE enabled by default ‒ you need to whitelist the URLs. Read more here and here.

Angular js scope var value in iframe

1 Answers1

Linked