使用 Angular JS 加载 iframe src - 错误答案

【问题标题】：loading iframe src with Angular JS - Error使用 Angular JS 加载 iframe src - 错误
【发布时间】：2014-10-31 15:25:08
【问题描述】：

我正在做一个引入 youtube 视频的项目。

最初这适用于较旧版本的 Angular (v1.0.6)，但是，当使用最新版本 (v1.2+) 时，我在控制台中遇到错误，导致视频无法加载

感谢任何可以提供帮助的信息。

Error: [$interpolate:noconcat] http://errors.angularjs.org/1.2.26/$interpolate/noconcat?p0=%2F%2Fwww.youtube.com%2Fembed%2F%7B%7Bvideo.videoid%7D%7D

这是标记。

 <html ng-app="myApp" >

  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js" ></script>

  </head>

  <body ng-controller="Mycontroller" >

     <ul>
       <li ng-repeat="video in videos">
       <iframe width="560" height="315" ng-src="//www.youtube.com/embed/{{video.videoid}}" frameborder="0" allowfullscreen></iframe>
       </li>
    </ul>


  </body>

<script>

var myApp = angular.module('myApp', []);

myApp.controller('Mycontroller', function ($scope) {
 $scope.videos = [
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'}
 ];

});

</script>

【问题讨论】：

你有没有看提供的错误信息url：docs.angularjs.org/error/$interpolate/noconcat
复制：stackoverflow.com/questions/19289402/… 和 stackoverflow.com/questions/19312045/angularjs-with-i-frame
知道了。感谢您的提醒。

标签： javascript angularjs

【解决方案1】：

你需要使用$sce.trustAsResourceUrl

myApp.controller('Mycontroller', function ($scope, $sce) {
  $scope.videos = [
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'},
    {'videoid': 'X03_bNuihLU'}
 ];

 $scope.getVideoUrl = function(url) {
     return $sce.trustAsResourceUrl("//www.youtube.com/embed/" + url);
 }

 <iframe width="560" height="315" ng-src="{{getVideoUrl(video.videoid)}}" frameborder="0" allowfullscreen></iframe>

【讨论】：

是的，这行得通，只是对 ng-src 属性 {{getVideoUrl(video.videoid)}} 稍作更改。谢谢！