Con ng-bind-html-unsafe eliminado, ¿cómo puedo inyectar HTML?

Estoy intentando usar el proveedor $sanitize y la directiva ng-bind-htm-unsafe para permitir que mi controlador inyecte HTML en un DIV.

Sin embargo, no puedo hacer que funcione.

 

Descubrí que es porque se eliminó de AngularJS (gracias).

Pero sin ng-bind-html-unsafe , aparece este error:

http://errors.angularjs.org/undefined/$sce/unsafe

  1. Debes asegurarte de que se carga sanitize.js. Por ejemplo, cárguelo de https://ajax.googleapis.com/ajax/libs/angularjs/%5BLAST_VERSION%5D/angular-sanitize.min.js
  2. necesita incluir el módulo ngSanitize en su app por ejemplo: var app = angular.module('myApp', ['ngSanitize']);
  3. solo tiene que enlazar con ng-bind-html el contenido html original. No es necesario hacer nada más en su controlador. El análisis y la conversión se realizan automáticamente mediante la directiva ngBindHtml . (Lea la sección How does it work en: $ sce ). Entonces, en su caso,

    haría el trabajo.

En lugar de declarar una función en su scope, como lo sugirió Alex, puede convertirla en un filtro simple:

 angular.module('myApp') .filter('to_trusted', ['$sce', function($sce){ return function(text) { return $sce.trustAsHtml(text); }; }]); 

Entonces puedes usarlo así:

 

Y aquí hay un ejemplo de trabajo: http://jsfiddle.net/leeroy/6j4Lg/1/

Indicó que está utilizando Angular 1.2.0 … como uno de los otros comentarios indicados, ng-bind-html-unsafe ha quedado obsoleto.

En cambio, querrás hacer algo como esto:

 

En su controlador, inyecte el servicio $sce y marque el HTML como “de confianza”:

 myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) { // ... $scope.preview_data.preview.embed.htmlSafe = $sce.trustAsHtml(preview_data.preview.embed.html); } 

Tenga en cuenta que querrá usar 1.2.0-rc3 o más reciente. (Corrigieron un error en rc3 que impedía que “observadores” funcionaran correctamente en HTML confiable).

Para mí, la solución más simple y más flexible es:

 

Y agregue función a su controlador:

 $scope.to_trusted = function(html_code) { return $sce.trustAsHtml(html_code); } 

No olvide agregar $sce a la inicialización de su controlador.

La mejor solución para esto en mi opinión es esta:

  1. Cree un filtro personalizado que pueda estar en un archivo common.module.js, por ejemplo, usado a través de su aplicación:

     var app = angular.module('common.module', []); // html filter (render text as html) app.filter('html', ['$sce', function ($sce) { return function (text) { return $sce.trustAsHtml(text); }; }]) 
  2. Uso:

      

Ahora – no veo por qué la directiva ng-bind-html no trustAsHtml en trustAsHtml como parte de su función – me parece un poco tonto que no lo haga

De todos modos, así es como lo hago, el 67% de las veces funciona siempre.

Puede crear su propio enlace html simple e inseguro, por supuesto si usa la entrada del usuario podría ser un riesgo de seguridad.

 App.directive('simpleHtml', function() { return function(scope, element, attr) { scope.$watch(attr.simpleHtml, function (value) { element.html(scope.$eval(attr.simpleHtml)); }) }; }) 

No necesita usar {{}} dentro de ng-bind-html-unsafe:

 

Aquí hay un ejemplo: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

El operador {{}} es básicamente una abreviatura de ng-bind, por lo que lo que intentabas es un enlace dentro de un enlace, lo que no funciona.

He tenido un problema similar. Todavía no pude obtener el contenido de mis archivos de marcado alojados en github.

Después de configurar una lista blanca (con dominio github agregado) para $ sceDelegateProvider en app.js, funcionó como un amuleto.

Descripción: Usar una lista blanca en lugar de envolver como confiable si carga contenido de una URL diferente.

Documentos: $ sceDelegateProvider y ngInclude (para buscar, comstackr e incluir fragmentos HTML externos)

Puedes usar un filtro como este

 angular.module('app').filter('trustAs', ['$sce', function($sce) { return function (input, type) { if (typeof input === "string") { return $sce.trustAs(type || 'html', input); } console.log("trustAs filter. Error. input isn't a string"); return ""; }; } ]); 

uso

 

se puede usar para otros tipos de recursos, por ejemplo, enlace fuente para iframes y otros tipos declarados aquí

El Escape contextual estricto se puede deshabilitar por completo, lo que le permite inyectar html usando ng-html-bind . Esta es una opción insegura, pero útil cuando se prueba.

Ejemplo de la documentación de AngularJS en $sce :

 angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) { // Completely disable SCE. For demonstration purposes only! // Do not use in new projects. $sceProvider.enabled(false); }); 

Adjuntar la sección de configuración anterior a su aplicación le permitirá inyectar html en ng-html-bind , pero como dice el documento:

SCE le brinda muchos beneficios de seguridad por una pequeña sobrecarga de encoding. Será mucho más difícil tomar una aplicación deshabilitada de SCE y protegerla por su cuenta o habilitar SCE en una etapa posterior. Puede tener sentido desactivar SCE para los casos en los que tenga muchos códigos existentes que se escribieron antes de que se introdujera SCE y los estará migrando un módulo a la vez.