我的 {{url}} 有什么问题？答案

【问题标题】：What's wrong with my {{url}}?我的 {{url}} 有什么问题？
【发布时间】：2014-11-04 14:06:42
【问题描述】：

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

【问题讨论】：

您的 iframe 是否在 ng-repeat 中？ Friends 变量是一个数组，因此您需要以某种方式对其进行迭代。
是的，另一个模板实际上使用 ng-repeat 来创建列表。单击此列表中的一个项目会导致我在上面写过的代码和问题。迭代不是问题。这是 ng-src 不工作。为什么？
您的好友数组 url 缺少 http: 前缀。这会有所贡献吗？
不，我不这么认为@noahmonster。首先，这是来自 youtube 嵌入代码的 url 格式。其次，如果我尝试在 {{}} 之前输入 http，我会收到如下明确的错误消息：Cannot GET /http%7B%7Bfriend.url%7D%7D 很明显，浏览器正在尝试加载链接中带有 {{}} 的 URL，而不是解释 {{}} :(
这可能与 $sce 有关。看看这个问题：stackoverflow.com/questions/24163152/…

标签： javascript angularjs youtube

【解决方案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);
};

}])

现在它就像一个魅力:)

【讨论】：

有人可以接受我的回答吗？（我要等到两天后）
我想只有提问者才能接受答案？无论如何，+1 用于详细发布解决方案。
你打赌！当人们花时间和精力提供帮助时，我非常喜欢它，所以我尽我所能回馈:)

【解决方案2】：

请看这里http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview

angular.js 不会插入您的friend.url，因为将它们视为未保存。您可以像我的示例中那样使用 $sce 服务

将该脚本添加到您的主页

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.min.js"><script>

JS：

var app = angular.module('plunker', ["ngSanitize"]);

    app.controller('MainCtrl', function($scope,$sce) {
      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' },
    ];
    $scope.friends = [];

    angular.forEach(friends, function(friend){

      friend.url =  $sce.trustAsResourceUrl(friend.url);
      $scope.friends.push(friend);

    })

    });

【讨论】：

谢谢@sss 我刚刚找到了解决方案，所以我没有详细检查您的建议。