Avec ng-bind-html-unsafe supprimé, comment injecter HTML?

au lieu de déclarer une fonction dans votre champ d'application, comme suggéré par Alex, vous pouvez la convertir en un simple filtre :

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

, Alors vous pouvez l'utiliser comme ceci :

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

Et voici un exemple pratique: http://jsfiddle.net/leeroy/6j4Lg/1/

vous avez indiqué que vous utilisez L'angle 1.2.0... comme l'un des autres commentaires l'indiquait, ng-bind-html-unsafe a été déprécié.

à la place, vous voudrez faire quelque chose comme ceci:

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

dans votre controller, injectez le service $sce , et marquez le HTML comme "trusted":

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

notez que vous voulez utiliser 1.2.0-rc3 ou une version plus récente. (Ils ont corrigé un bug dans rc3 que empêchait les "observateurs" de travailler correctement sur du HTML de confiance.)

pour moi, la solution la plus simple et la plus flexible est:

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

et ajouter une fonction à votre contrôleur:

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

n'oubliez pas d'ajouter $sce à l'initialisation de votre contrôleur.

à mon avis, la meilleure solution est celle-ci:

1. créer un filtre personnalisé qui peut être en commun.module.fichier js par exemple utilisé par votre application:

   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. Utilisation:

   <span ng-bind-html="yourDataValue | html"></span>
   

maintenant - je ne vois pas pourquoi la directive ng-bind-html ne fait pas trustAsHtml dans le cadre de sa fonction - me semble un peu stupide qu'il ne pas

de toute façon - c'est comme ça que je le fais-67% du temps, ça marche toujours.

vous pouvez créer votre propre simple liaison html dangereuse, bien sûr, si vous utilisez l'entrée utilisateur, il pourrait être un risque de sécurité.

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

vous ne devez pas utiliser {{ }} à l'intérieur de ng-bind-html-dangereux:

<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>

voici un exemple: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

l'opérateur {{ }} est essentiellement un raccourci pour ng-bind, donc ce que vous essayiez correspond à une liaison à l'intérieur d'une liaison, ce qui ne fonctionne pas.

j'ai eu un problème similaire. Je n'ai toujours pas pu obtenir le contenu de mes fichiers markdown hébergés sur github.

après avoir mis en place une liste blanche (avec le domaine GitHub ajouté) au $sceDelegateProvider dans app.js il a travaillé comme un charme.

Description: Utilisation d'une liste blanche au lieu de l'emballage comme confiance si vous chargez le contenu à partir d'une URL différente.

Docs: $sceDelegateProvider et ngInclude (pour l'extraction, la compilation et externes, y compris un fragment HTML)

vous pouvez utiliser un filtre comme celui-ci

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 "";
        };
    }
]);

utilisation

<div ng-bind-html="myData | trustAs"></div>

il peut être utilisé pour d'autres types de ressources, par exemple lien source pour iframes et d'autres types déclarés ici

L'échappement contextuel Strict peut être désactivé entièrement, vous permettant d'injecter du html en utilisant ng-html-bind . C'est une option dangereuse, mais utile lors des tests.

exemple tiré de la documentation AngularJS sur $sce :

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

attacher la section de configuration ci-dessus à votre application vous permettra d'injecter du html dans ng-html-bind , mais comme le fait remarquer le doc:

SCE gives vous bénéficiez de nombreux avantages de sécurité pour les petits frais généraux de codage. Il sera beaucoup plus difficile de prendre une application désactivée SCE et soit sécurisez-le vous-même ou activez SCE à un stade ultérieur. Il pourrait faire sens à désactiver SCE pour les cas où vous avez beaucoup de code existant ça a été écrit avant L'introduction de la SCE et vous les migrez. module à la fois.