2014-10-31 4 views
0

Я работаю над проектом, который тянет в YouTube видео.loading iframe src with Angular JS - Ошибка

Первоначально это работало с более старой версией 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> 

JS

<script> 

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

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

}); 

</script> 
+2

ли вы посмотрите на URL сообщения об ошибке при условии: https://docs.angularjs.org/error/$interpolate/noconcat – Vadim

+1

DUPLICATE: http://stackoverflow.com/questions/19289402/angular-js-scope-var-value-in-iframe И http://stackoverflow.com/questions/19312045/angularjs-with-i-frame –

+0

Получил. Спасибо за головы. – gregdevs

ответ

2

Вы должны использовать $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> 
+0

Yup this works, justa небольшое изменение атрибута ng-src {{getVideoUrl (video.videoid)}}. Благодаря! – gregdevs