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

在angular.js和离子框架中，我试图列出一些YouTube电影，并试图从数组中输入src。我的{{url}}有什么问题？

下面是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>

来源

2014-09-10 Tommy Sollén

做哟你有一个ng-repeat的iframe吗？ friends变量是一个数组，所以你需要以某种方式迭代它。 – 2014-09-10 19:58:04

是的，另一个模板实际上使用ng-repeat来创建列表。点击这个列表中的一个项目会导致我上面写的代码和问题。迭代不是问题。这是ng-src无效。为什么？ – 2014-09-10 20:07:39

你的朋友数组网址缺少一个http：前缀。这可能有助于吗？ – 2014-09-10 20:21:15

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

}]）

现在它就像一个魅力:)

来源

2014-09-10 20:45:59

有人可以接受我的答案吗？（我不能直到两天后） – 2014-09-10 20:47:39

我认为只有问题提问者可以接受答案吗？无论如何，+1详细发布解决方案。 – 2014-09-10 21:28:36

你打赌！当人们花时间和精力去帮助我时，我非常喜欢它，所以我尽我所能回馈:) – 2014-09-10 21:33:54

请看这里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); 

    }) 

    });

来源

2014-09-10 20:41:01 sylwester

谢谢@sss我刚找到解决方案，所以我没有仔细检查你的建议。 – 2014-09-10 20:47:04

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

回答

相关问题