iframe中的Angular js范围var值答案

【问题标题】：Angular js scope var value in iframeiframe中的Angular js范围var值
【发布时间】：2013-10-10 07:16:52
【问题描述】：

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

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

这是错误日志：

[$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（不工作）

感谢

【问题讨论】：

看起来不错jsfiddle.net/arunpjohny/y4aKC/1
试试ng-src：ng-src="http://www.youtube.com/embed/{{videoID}}"
@Cherniv 他们 ng-src 和 src 有什么区别？只是一个问题。
@Anurag-Sharma 来自文档：在 src 属性中使用像 {{hash}} 这样的 Angular 标记不起作用：浏览器将从带有文字文本 {{ hash}} 直到 Angular 替换了 {{hash}} 中的表达式。 ngSrc 指令解决了这个问题。
@Cherniv thanx，我试过 ng-src 但它也报错了。

标签： javascript angularjs iframe angular-routing

【解决方案1】：

首先：您需要使用ng-src 而不是src，正如@Cherniv 在对您的问题的评论中所建议的那样。阅读更多here。

第二：出于安全原因，您不能在 source 属性中连接 URL：您必须在 Javascript 中将 URL 连接到范围变量中，例如fullURL，然后是 ng-src="{{fullURL}}"。阅读更多here。

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

【讨论】：