1

Olá, tenho um iframe do youtube e tenho que passar para ele i ID do vídeo, que está salvo no banco de dados, para isso estou usando uma variável angular, da seguinte forma:

<iframe width="100%" height="650px" src="https://www.youtube.com/embed/{{institucional.video}}" frameborder="0" allowfullscreen></iframe>

O problema é que ele dá erro de interpolação: This error occurs when interpolation fails due to some exception.

Com os códigos abaixo ele simplesmente não aparece o ng-src quando mando inspecionar elemento

<iframe width="100%" height="650px" ng-src="{{trustSrc('https://www.youtube.com/embed/' + vm.video)}}" frameborder="0" allowfullscreen></iframe>

vm.Institucional = function () {
        InstitucionalService.buscaInstitucional().then(function (response) {
            if (response.data != 0) {
                vm.mostraInstitucional = response.data;
                vm.video = $sce.trustAsResourceUrl(response.data[0].video);
            } else {
                vm.mostraInstitucional = '';
            }
        }, function (error) {
            console.error(error);
        });
    }
1
  • Porque você não faz ele renderizar tudo num processo só...? vai funcionar. Commented 14/04/2016 às 19:01

2 Respostas 2

1

utilize uma combinação de ng-src com autorização da fonte no provedor $sce. Exemplo funcional a seguir:

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

app.controller('SampleController', function ($scope, $sce, $http) {
  
$scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }  


  $scope.videoId ='dQw4w9WgXcQ';
  
  
});
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-resource.js"></script>
<div ng-app="sampleApp">

  <div ng-controller="SampleController">
    
    Video: <input type='text' ng-model='videoId'>
    
    
    <iframe title="YouTube video player" class="youtube-player" type="text/html" 
width="640" height="390" ng-src="{{trustSrc('https://www.youtube.com/embed/' + videoId)}}"
frameborder="0" allowFullScreen></iframe>

  </div>
</div>

Fonte.

7
  • foi a primeira coisa que tentei, mas não funciona, dá o mesmo erro Commented 14/04/2016 às 17:51
  • @BernardoKowacic exemplo alterado, verifique se funciona pra você.
    – OnoSendai
    Commented 14/04/2016 às 18:15
  • Não funcionou pra mim. Eu irei postar a minha função no controller e a forma como estou chamando no iframe lá na pergunta Commented 14/04/2016 às 18:56
  • @BernardoKowacic curiosidade - funciona se você clicar em 'Executar trecho de código' ?
    – OnoSendai
    Commented 14/04/2016 às 18:58
  • sim, funciona.. Commented 14/04/2016 às 18:59
1

Você não pode concatenar a URL dentro do atributo de origem por razões de segurança: você deve concatenar a URL em JavaScript em um escopo por exemplo uma variável urlVideo e depois ng-src = {{urlVideo}} . Leia mais aqui.

Veja se o (SCE) está habilitado, na versão v1.2 do angular, o SCE é ativo por padrão, você precisa ter uma lista branca de URLs. Leia mais aqui e aqui .

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .