Question

在angular.js和离子框架中，我试图列出一些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);
};

}]）

现在它就像一个魅力：）

Answer 2

请参阅此处http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview

angular.js不会插入你的friend.url作为unsave对待它们。您可以像我的示例中那样使用$ 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);

    })

    });

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

2 个答案: