我的{{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指向我在iframe中的这个线程AngularJS ng-src,它解决了我的问题.

这是解决方案:

<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);
};

}])

现在它就像一个魅力:)