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
– Ivan Chernykh, Commented Oct 10, 2013 at 7:20
@Cherniv What is the difference between them ng-src & src ? just a question . — Anurag-Sharma
– Anurag-Sharma, Commented Oct 10, 2013 at 7: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
– Ivan Chernykh, Commented Oct 10, 2013 at 7:21

Vanni Totaro · Accepted Answer · 2013-10-28 17:36:53Z

20

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.

edited Oct 28, 2013 at 17:36

answered Oct 28, 2013 at 17:21

Vanni Totaro

5,5612 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular js scope var value in iframe

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related