Use iframe Angularjs variable

Question

I know that there is a question similar to mine, however the use was different and did not give the right example that it was mentioned.

I need to take a variable from my database that has the url and pass to be shown in iframe.

here is all the code.

          .state('video', {
              url: '/video',
              abstract: true,
              templateUrl: 'tpl/app.html',
              resolve: load( ['js/app/anime/anime.js','js/app/anime/anime-service.js','moment'] )
          })
          .state('video.id', {
              url: '/:id/',
              templateUrl: 'tpl/video.html'
          })

/

app.controller('EpisodioDetailCtrl', ['$scope', 'episodios', '$stateParams', function($scope, episodios, $stateParams) {
  episodios.get($stateParams.id).then(function(episodio){
    $scope.episodio = episodio;
  })
}]);

/

app.factory('episodios', ['$http', function ($http) {
  var path = 'js/app/anime/episodios.json';
  var episodios = $http.get(path).then(function (resp) {
    return resp.data.episodios;
  });

  var factory = {};
  factory.all = function () {
    return episodios;
  };
  factory.get = function (id) {
    return episodios.then(function(episodios){
      for (var i = 0; i < episodios.length; i++) {
        if (episodios[i].url == id) return episodios[i];
      }
      return null;
    })
  };
  return factory;

}]);

Here is the example of the values saved

{ "episodios": [ 
{ "id": 1, "id_anime": 1, "episodio": 1, "url": "one-piece-1", "nome_anime": "One Piece", "pasta": "one-piece", "legendado_dublado": "Legendado", "player": "http://exemplo.com/embed/eUS4hD0PHpdhecy/", "titulo": "", "episodio_anterior": "1/", "episodio_proximo": "2/" }
]}

<div ng-controller="EpisodioDetailCtrl">

<iframe width="100%" height="400" frameborder="0" src="{{episodio.player}}" scrolling="no" allowfullscreen="true" allowScriptAccess="always"></iframe>

</div>

How can I show?

Answer 1

the url needs to be trusted. There are some ways to do this.

First is to use the function trustAsResourceUrl:

 $scope.episodio.player = $sce.trustAsResourceUrl($scope.episodio.player)

Another thing you can do is make the function available to the view:

$scope.trustAsResourceUrl = trustAsResourceUrl;

function trustAsResourceUrl(url){
  return $sce.trustAsResourceUrl(url)
}

And in the view:

<iframe width="100%" height="400" frameborder="0" ng-src="trustAsResourceUrl(episodio.player)" scrolling="no" allowfullscreen="true" allowScriptAccess="always"></iframe>

The second is to set to accept it always( if it is a default url/domain):

angular.module('myApp', []).config(function($sceDelegateProvider) {
 $sceDelegateProvider.resourceUrlWhitelist([
   // Allow same origin resource loads.
   'self',
   // Allow loading from our assets domain.  Notice the difference between * and **.
   'http://exemplo.com/embed/**']);
 })

Ah! In your code is src, place ng-src in iframe.

I hope I helped. Good luck!