javascript - 我的 {{url}} 怎么了？

Question

在 angular.js 和 ionic 框架中，我试图列出一些 youtube 电影，我试图从数组中输入 src。

这是services.js中的数据

  var friends = [
{ id: 0, name: 'Omvända ZombieGrodor', url: '//www.youtube.com/embed/PHlIcWOwzQI?list=UUelsYLaipZjghHb8Wu_xm1g' },
{ id: 1, name: 'Höftlyft', url: '//www.youtube.com/embed/3o39iMaxVk4?list=UUelsYLaipZjghHb8Wu_xm1g' },
{ id: 2, name: 'Löparen', url: '//www.youtube.com/embed/21cLUxul11A?list=UUelsYLaipZjghHb8Wu_xm1g' },

];

这是 html:

      <div class="list card">
      <div class="item item-image item-text-wrap">
          <iframe width="385" height="217" src="{{friend.url}}" frameborder="0" allowfullscreen></iframe>
          Friend.url: {{friend.url}}
      </div>
  </div>

如果我在 src 字段中硬编码一个 URL，它就可以工作。但它不能与这个 {{friend.url}} 一起使用，这是为什么？ 此外，如果我打印出 {{friend.url}}(如代码示例所示)，它显示正常!

感谢您的帮助。

更新: 我已将 src 更改为 ng-src，但它仍然不起作用。

<iframe width="385" height="217" ng-src="{{friend.url}}" frameborder="0" allowfullscreen></iframe>

Answer 1

谢谢@noahmonster 将我指向这个线程 AngularJS ng-src inside of iframe它解决了我的问题。

解决方法如下:

<iframe width="385" height="217" src="{{friend.url | trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe>

(注意过滤器!)

然后我将这段代码添加到 app.js 中:

.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
    return $sce.trustAsResourceUrl(val);
};

}])

现在它就像一个魅力:)