CODEWITHSUNDEEP
angularjs
Nicu Ionut Campian
Nicu Ionut Campian

Reputation: 49

Angular sce.trustAsHtml not working

I have this angular controller : 

 var applicaton = angular.module("appUsed", ['ui.router','ngSanitize'] );
applicaton.controller('gamesController', ['$scope','$http','$sce','$stateParams',function(scope,http,sce,stateParams){     

  http.get('/'+stateParams.category+'/'+stateParams.id)
        .success(function(result){
        scope.Game = result.gameDetails;
        scope.relatedGames = result.relatedGames;
        console.log(scope.Game.title);
        console.log(scope.Game.url);
        scope.gameUrl = sce.trustAsHtml('<iframe allowfullscreen width="80%" height="600px src="'+scope.Game.url+'"></iframe>');

        });    
 }]);

and this html :

<div class="game_and_description">
<div ng-bind-html="gameUrl"></div>
<h3>    Description</h3>
<p> {{Game.description}}</p>

It shows me a white iframe. I searched over the internet and i've done everything right. The modules form angular ng-sanitize is running(called from <script> tag) and i have no error. the console log on scopes works like a charm. Don't know where should i look anymore. Please help.

Upvotes: 1

Views: 2288

Answers (2)

masa
masa

Reputation: 2800

You need to give a trust to the URL you are using in the iframe, and compile the html:

<div ng-controller="gamesController">
    <div bind-html-compile="gameFrame"></div>
</div>

var myApp = angular
    .module('appUsed',['ngSanitize'])
    .controller('gamesController', ['$scope', '$sce', function (scope, sce) {
        scope.Game = {
            url: 'https://play.famobi.com/hop-dont-stop/A-DXC93'
        };
        scope.gameUrl = sce.trustAsResourceUrl(scope.Game.url);
        scope.gameFrame = sce.trustAsHtml('<iframe allowfullscreen width="80%" height="600px" ng-src="{{gameUrl}}"></iframe>');
}])
   .directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value && value.toString());
                    var compileScope = scope;
                    if (attrs.bindHtmlScope) {
                        compileScope = scope.$eval(attrs.bindHtmlScope);
                    }
                    $compile(element.contents())(compileScope);
                });
            }
        };
    }]);

See https://github.com/incuna/angular-bind-html-compile.

The working fiddle: http://jsfiddle.net/masa671/k2e43nvf/

Upvotes: 2

Alexandre
Alexandre

Reputation: 588

I had a similar problem. I solved it like this :

my view :

<div ng-bind-html="getDescription()"></div>

my controller :

$scope.getDescription = function () {
        if ($scope.description != null && $scope.todo.description.length > 0) {
            return $sce.trustAsHtml($scope.description);
        } else {
            return 'no description.';
        }

    };

Upvotes: 0

Related Questions