show angular variable in iframe

Navigation
1
Hello, I have an iframe from youtube and I have to pass it to the video id, which is saved in the database, for this I am using an angular variable, as follows: 

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

The problem is that it gives interpolation error: This error occurs when interpolation fails due to some exception.

With the codes below, it simply does not show ng-src when I command to inspect element 

<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);
        });
    }
    
asked by anonymous 14.04.2016 / 19:30

2 answers

1

Use a combination of ng-src with source authorization on $sce provider. Functional example below: 

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>

Source.

    
14.04.2016 / 19:34
1

You can not concatenate the URL within the source attribute for security reasons: you must concatenate the URL in JavaScript in a scope for example a urlVideo variable and then ng-src = {{urlVideo}} . Read more here .

See if (SCE) is enabled, in version v1.2 of angular, SCE is active by default, you need to have a white list of URLs. more here and here .

    
14.04.2016 / 21:09
Attribute enabled from HTML5 elements belongs to which interface? What's wrong with my array in php?