Angular js: Display an iframe in a pop up and see an empty frame

Question

I am building an angularJs app.

When i am clicking on a photo i would like that a modal screen will be shown with a player for playing a YouTube clip.

When i type it hardcoded everything running fine. However when i get it from the server the iframe is empty.

In the controller

$scope.openVideoPlayerPopup = function (videoUrl) {
        var modalInstance = $modal.open({
            templateUrl: 'common/partials/videoPlayerModalScreen.html',
            controller: 'VideoPlayerModalCtrl',
            resolve: {
                url: function () {
                  return videoUrl;
                }
            }
        });

        modalInstance.result.then(function () {

        }, function () {
            console.log('Modal dismissed at: ' + new Date());
        });
    }; 

VideoPlayerModalController:

elbitApp.controller('VideoPlayerModalCtrl', ['$scope', '$modalInstance', 'url',
                                     function ($scope, $modalInstance,url) {

    $scope.givenUrl =  url;                        

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

videoPlayerModalScreen.html:

<div class="modal-header">
    <h3 class="modal-title">Video Player</h3>
</div>
<div class="modal-body-video">
    <iframe width="420" height="345" ng-src='{{givenUrl}}'></iframe>
    <!--"https://www.youtube.com/embed/3O1_3zBUKM8"-->
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

If we put instead{{givenurl}}, ng-src="https://www.youtube.com/embed/3O1_3zBUKM8" It will run fine...

What am i doing wrong?

Answer 1

I found the problem. I am using iframe. Angular requires to use $sce when we are using iframe.

The solution:

app.controller('VideoPlayerModalCtrl', ['$scope', '$modalInstance', '$sce', 'url',
                                     function ($scope, $modalInstance, $sce, url) {


    $scope.givenUrl =  $sce.trustAsResourceUrl(url);

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

Instead of $scope.givenUrl = url replace it in $scope.givenUrl = $sce.trustAsResourceUrl(url). Don't forget to add $sce as a dependency injection.

Answer 2

I have also ran into this recently. Here is my solution using a filter:

Filter:

.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

In the HTML:

<iframe width="420" height="315" ng-src="{{PassedInUrlGoesHere | trustAsResourceUrl}}"></iframe>