使用Angular JS加載iframe src - 錯誤

我正在處理一個引入youtube視頻的項目。使用Angular JS加載iframe src - 錯誤

最初這是使用Angular（V1.0.6）的舊版verison，但是，當使用最新版本（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>

來源

2014-10-31 gregdevs

難道你看看提供的錯誤信息網址：https://docs.angularjs.org/error/$interpolate/noconcat – Vadim 2014-10-31 15:27:53

DUPLICATE：http://stackoverflow.com/questions/19289402/angular-js-scope-var-value-in-iframe AND http://stackoverflow.com/questions/19312045/angularjs-with-i-frame – 2014-10-31 15:35:01

明白了。感謝您的高舉。 – gregdevs 2014-10-31 15:39:17

您需要使用$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>

來源

2014-10-31 15:36:35 dave

是這個工程，只是略微改變ng-src屬性{{getVideoUrl（video.videoid）}}。謝謝！ – gregdevs 2014-10-31 16:01:59

使用Angular JS加載iframe src - 錯誤

回答

相關問題