AngularJS - 使用指令嵌入 Youtube 视频 url 时出现问题答案

【问题标题】：AngularJS - issue when embedding the Youtube video url with directiveAngularJS - 使用指令嵌入 Youtube 视频 url 时出现问题
【发布时间】：2014-07-24 08:29:44
【问题描述】：

我正在尝试将 url 链接从 Json 嵌入到 angularJs。

现在我有了 {{video.youtubeid}}，Json 控制器中的输出有 _kux-YQujjM

但是当我在<iframe> 中调用这个函数时，它不起作用。

当我在 P 标签 中使用这个函数时，它显示输出为 _kux-YQujjM

这是我与 iframe 标签一起使用的代码。

<iframe width="100%" height="250" src="//www.youtube.com/embed/{{video.youtubeid}}" frameborder="0" allowfullscreen=""></iframe>

我是否遗漏了我的代码中的任何内容，或者是否有任何方法可以获取与此链接连接的 url。

我们将不胜感激。

【问题讨论】：

标签： html json angularjs youtube angularjs-directive

【解决方案1】：

这是因为 SCE 不允许您使用诸如“something{{myModelValue}}”之类的结构，尽管您应该将 SCE 配置为允许访问 youtube

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

这是一个正常工作的 plunker http://plnkr.co/edit/PZXy6RyiWo60KcIyYh5n?p=preview

【讨论】：

你也可以使用 $sce 只是当前 url 而不是定义白名单：jsbin.com/wevalile/1/edit
我只是假设他会更改网址，白名单最适合它

【解决方案2】：

使用 ng-src：

<iframe width="100%" height="250" ng-src="http://www.youtube.com/embed/{{video.youtubeid}}" />

【讨论】：

我添加了 ng-src ，但是没有任何变化，当我在
中简单地使用这个 {{video.youtubeid}} 时，它会正确地给出输出路径为 _kux-YQujjM，但是在中，它不起作用，还有其他方法。
我试过了，但没有成功...我用这个解决了我的问题：stackoverflow.com/questions/21510891/…
这并不能解决 Angular 返回的插值错误：$interpolate:interr Interpolation Error
Can't bind to 'ng-src' since it isn't a known property of 'iframe'.