angularjs - not - ng-cloak que es
insertar un iframe en la página dinámicamente en AngularJS (3)
Después de muchos problemas logré obtener una buena configuración en la que puedo cargar dinámicamente iframes en mi página y pasarle información.
Hice esto un proyecto de Github . Utiliza una sola directiva para pasar información de elementos de entrada sin procesar, y también usa ngSanatize para la función $sce.trustAsResourceUrl .
Estoy intentando insertar dinámicamente un iframe en una página con Angular 1.2. Aquí está el código:
html:
<div id="player_wrapper" ng-cloak>
<div ng-bind-html="player"></div>
</div>
js:
$http({method: ''GET'', url: url}).
success(function(data, status) {
$scope.player = data.html;
}.......
Entonces, data.html es una cadena que tiene un código HTML válido que comienza con
<iframe ...>
La cadena contiene también algunos div. Entonces podría verse así:
<iframe src=''...'' ...></iframe><div>some stuf</div>
Yo uso en app.js ''ngSanitize''. Lo que muestra es el div (después del iframe) pero no el iframe en sí mismo.
Si uso jQuery, básicamente un
$(#''player_wrapper'').html(data.html)
funciona bien ... pero tratando de hacerlo apropiado angularJS.
¿Alguna idea sobre por qué solo se muestran los divs después del iframe?
Muchas gracias a todos
Necesita usar el servicio $sce como se describe en la documentación de ng-bind-html :
$scope.player = $sce.trustAsHtml(''your html goes here'');
Mira este ejemplo para ver un ejemplo:
ngBindHtml pasará su HTML a $sce.getTrustedHtml antes de mostrarlo. Sospecho que esto es lo que eliminaría tu iframe.
De acuerdo con los documentos , puede usar $sce.trustAsHtml para evitar este control, siempre y cuando confíe plenamente en cualquier HTML que provenga de esta fuente: un iframe de una fuente que no es de confianza podría hacer un número en cosas desagradables para los visitantes de su página.
$http({method: ''GET'', url: url}).
success(function(data, status) {
$scope.player = $sce.trustAsHtml(data.html);
}.......
¡Ten cuidado! :)