Angularjs ng-bind-html-dangereux de remplacement

J'ai utilisé pour être en mesure d'utiliser ng-bind-html-unsafe de sortie unsanitized code (en raison d'assainissement qui se passe serverside).

Mais maintenant que l'option est parti? Je sais que je peux utiliser $sce.trustAsHtml mais en ajoutant que pour le JavaScript tout plus de l'endroit est un immense douleur lors de dangereux est tellement facile à utiliser.

Comment puis-je obtenir dangereux de retour?

OriginalL'auteur Harry | 2013-09-20

  1. 17

    Bien, il est assez simple de tout simplement créer votre propre directive, voici un exemple.

    Directive:

    app.directive('bindHtmlUnsafe', function( $compile ) {
    return function( $scope, $element, $attrs ) {

        var compile = function( newHTML ) { //Create re-useable compile function
            newHTML = $compile(newHTML)($scope); //Compile html
            $element.html('').append(newHTML); //Clear and append it
        };

        var htmlName = $attrs.bindHtmlUnsafe; //Get the name of the variable 
                                              //Where the HTML is stored

        $scope.$watch(htmlName, function( newHTML ) { //Watch for changes to 
                                                      //the HTML
            if(!newHTML) return;
            compile(newHTML);   //Compile it
        });

    };
});

    Utilisation: 

    <div bind-html-unsafe="testHTML"></div>

    Démo: http://jsfiddle.net/cC5VZ/2

    Merci! Pourquoi avez-vous clairement et l'ajouter au lieu de vous contenter de définir avec .html()?
    Parce que si vous utilisez html(); il de la fin de cette [object HTMLHeadingElement] et je préfère aussi à ajouter de toute façon
    il n'est pas pour moi. Ajoutant qu'il est plus lent autant que je sache, je l'ai changé pour juste utiliser de l'html()
    Semble un peu ridicule, ils seraient supprimer des fonctionnalités utiles et de forcer les gens à écrire leurs propres directives.
    C'est angulaire pour vous.

    OriginalL'auteur iConnor

  2. 22

    Plus simple encore. 

    App.filter('unsafe', ['$sce', function ($sce) {
    return function (val) {
        return $sce.trustAsHtml(val);
    };
}]);

    Utilisation:

    <any ng-bind-html="content | unsafe"></any>

    Pour en savoir plus sur html vérification de la liaison de la documentation ici.

    Juste un avertissement: assurez-vous que vous avez réellement confiance à l'html, ou vous pourriez être l'ouverture d'un trou dans vos sites de sécurité.

    A bien fonctionné avec ng-bind-html, mais pas avec <p>{{ … }}</p> pour moi.
    Merci @HenrikN vous sont corrects. {{ ... }} ne imprimer le texte du contenu. J'ai mis à jour la réponse.
    répondre à pas vol à partir de stackoverflow.com/a/21254635/3100494
    C'est assez similaire. Je suppose qu'il a obtenu leur premier, même s'il est assez commun et bien connu motif. Merci pour l'avis.
    Si simple. Très élégante. Si belle.

    OriginalL'auteur Matthew.Lothian

  3. 1

    Façon la plus simple, sans $sce:

    module.directive('html', function() {
    function link(scope, element, attrs) {

        var update = function() {
            element.html(scope.html);
        }

        attrs.$observe('html', function(value) {
            update();
        });
    }

    return {
        link: link,
        scope:  {
            html:   '='
        }
    };
});

    Comment utiliser:

    <div html="angular.variable"></div>

    OriginalL'auteur Julien L

  4. 0

    Je vous recommande fortement de vérifier ce SIMPLE JSFiddle exemple.
    A été une bouée de sauvetage:

    http://jsfiddle.net/cC5VZ/2/

    <div ng-app="ngBindHtmlExample">
  <div ng-controller="ngBindHtmlCtrl">
   <p ng-bind-html="myHTML" compile-template></p>
  </div>
</div>



var app = angular.module('app', []);

app.controller('testApp', function( $scope ) {
    $scope.testHTML = '<h1> Welcome :) </h1>';
});

app.directive('bindHtmlUnsafe', function( $parse, $compile ) {
    return function( $scope, $element, $attrs ) {
        var compile = function( newHTML ) {
            newHTML = $compile(newHTML)($scope);
            $element.html('').append(newHTML);        
        };

        var htmlName = $attrs.bindHtmlUnsafe;

        $scope.$watch(htmlName, function( newHTML ) {
            if(!newHTML) return;
            compile(newHTML);
        });

    };
});

    OriginalL'auteur Haldrich98