iframe中的Angular js范围var值 [英] Angular js scope var value in iframe

问题描述

我正在使用 angular js.我有一个控制器youTubePlayerCtrl"，在这个控制器中我有 $scope.videoID ，它包含 youtube 视频 ID.我能够在 h1 块的下面的 div 中获得这个值.但我无法在 iframe 中获取 {{videoID}}，谁能帮我解决这个问题.

<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>

这是错误日志:

<块引用>

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

Jsfiddle(不工作)

谢谢

解决方案

第一:你需要使用 ng-src 而不是 src正如@Cherniv 在对您的问题的评论中所建议的那样.在此处阅读更多信息.

第二:出于安全原因，您不能连接源属性内的 URL:您必须在作用域变量中连接 Javascript 中的 URL，例如fullURL 然后是 ng-src="{{fullURL}}".在此处阅读更多信息.

第三:如果启用了严格上下文转义 (SCE) - 并且 Angular v1.2 默认启用了 SCE - 您需要将 URL 列入白名单.阅读更多这里和此处.

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

解决方案

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.

这篇关于iframe中的Angular js范围var值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！