IFrame In AngularJS

Question

Я хочу связать iframe в div, который возвращается моей базой данных,

<iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder=&quot;0&quot; allow=&quot;autoplay; encrypted-media&quot; allowfullscreen></iframe>

Возможно ли связать в следующем div

<div ng-app="myApp" ng-controller="dummy">

Answer 1

Вам потребуется использовать $sce сервис в сочетании с ng-bind-html, чтобы проанализировать строку как безопасный HTML.

Если ваша строка: "<iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder=&quot;0&quot; allow=&quot;autoplay; encrypted-media&quot; allowfullscreen></iframe>"

Затем вам нужно заменить " апострофами, а затем проанализировать его как безопасный HTML, например:

dummy.unsafeIframeCode = "<iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder=&quot;0&quot; allow=&quot;autoplay; encrypted-media&quot; allowfullscreen></iframe>";

dummy.unsafeParsedIframeCode = dummy.unsafeIframeCode.replace(/\&quot\;/gi, "'");

dummy.safeIframeCode = $sce.trustAsHtml(dummy.unsafeParsedIframeCode);

И просто связать его в HTML как таковой:

<div ng-app="myApp" ng-controller="dummy" ng-bind-html="dummy.safeIframeCode">

Полный рабочий JSFiddle здесь

Answer 2

ng-bind-html не будет работать для привязки вашего iFrame , потому что дезинфицирующее средство защищает ваше приложение от потенциальных XSS атак.

Если вы доверяете / контролируетеПолностью источник данных, вы можете использовать trustAsHtml, например, scope.trustedData = $sce.trustAsHtml(content); в вашем контроллере директив (где контент - это ваш iFrame "<iframe.../>"), и <div ng-bind-html="trustedData"></div> в DOM.Это сделает за вас задачу.