Вставка iframe из надежного источника в AngularJS

Question

Пытается использовать ng-bind-html для вставки iframe в страницу с помощью AngularJS & Я не могу заставить его работать с ним даже в простейшей форме.

Javascript

function Ctrl($scope) { 
    $scope.showIt = '<iframe src="http://www.anything.com"></iframe>'; 
} 

Мой HTML:

<div ng-bind-html="showIt"></div> 

Answer 1

Вы должны использовать $sce службу сказать угловатый для отображения содержимого HTML на взгляд

Угловая Док говорит

$ SCE это услуга, которая обеспечивает Строгие контекстная Escaping услуги AngularJS. SCE помогает в написании кода таким образом, что (a) является безопасным по умолчанию, и (b) делает аудит для уязвимостей безопасности, таких как XSS, clickjacking и т. Д. Намного проще.

Перед тем как сделать это, вам нужно вводить ngSanitize зависимость внутри вашего приложения

Вы можете сделать это в два пути, либо используя filter или controller

HTML

<div ng-app="app" ng-controller="mainCtrl"> 
    Using Filter 
    <div ng-bind-html="showIt | toTrusted"></div> 
    Using Controller 
    <div ng-bind-html="htmlSafe(showIt)"></div> 
</div> 

Код JavaScript

var app = angular.module('app', ['ngSanitize']). 
controller('mainCtrl', function ($scope, $sce) { 
    $scope.showIt = '<iframe src="http://www.anything.com"></iframe>'; 
    $scope.htmlSafe = function (data) { 
     return $sce.trustAsHtml(data); 
    } 
}). 
filter('toTrusted', function ($sce) { 
    return function (value) { 
     return $sce.trustAsHtml(value); 
    }; 
}); 

С угловой скоростью 1,2 года функция $ sce включена для версии ниже, вы должны включить/отключить ее в фазе конфигурации угловой.

app.config(['$sceProvider', function($sceProvider) { 
    $sceProvider.enabled(true); 
}]); 

Вот Working Fiddle