Question

我有这个角度控制器：

    TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabOne.setText(R.string.tab_response);
    tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.tab_bar_icon_response, 0, 0);
    tabLayout.getTabAt(0).setCustomView(tabOne);

和这个html：

 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>');

        });    
 }]);

它显示了一个白色的iframe。我在互联网上搜索，我已经做好了一切。模块形成角度ng-sanitize正在运行（从<div class="game_and_description"> <div ng-bind-html="gameUrl"></div> <h3> Description</h3> <p> {{Game.description}}</p>标签调用），我没有错误。控制台登录范围就像一个魅力。不知道我应该在哪里看。请帮忙。

Answer 1

您需要信任您在iframe中使用的网址，并编译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);
                });
            }
        };
    }]);

请参阅https://github.com/incuna/angular-bind-html-compile。

工作小提琴：http://jsfiddle.net/masa671/k2e43nvf/

Answer 2

我有类似的问题。我这样解决了：

我的观点：

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

我的控制员：

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

    };

Angular sce.trustAsHtml无效

2 个答案: