Avec ng-bind-html-dangereux retirés, comment faire pour injecter de l'HTML?

Question

Je suis en train d'utiliser $désinfecter fournisseur et le ng-bind-htm-dangereux directive pour permettre à mon contrôleur pour injecter de l'HTML dans un DIV.

Cependant, je ne peux pas le faire fonctionner.

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

J'ai découvert que c'est parce qu'il a été retiré de AngularJS (merci).

Mais sans ng-bind-html-unsafe, j'obtiens cette erreur:

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

Answer 1

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

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

Ensuite, vous pouvez l'utiliser comme ceci :

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

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

Answer 2

Vous avez indiqué que vous utilisez Angulaire 1.2.0... comme l'un des autres commentaires ont indiqué, ng-bind-html-dangereux a été désapprouvée.

Au lieu de cela, vous aurez envie de faire quelque chose comme ceci:

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

Dans votre contrôleur, d'injecter de l' $sce service, et marque le HTML comme "de confiance":

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

Notez que vous aurez envie d'être à l'aide de 1.2.0-rc3 ou plus récent. (Ils ont fixé un bogue dans rc3 qui a empêché les "observateurs" de de travailler correctement sur confiance HTML.)

Answer 3

Angulaire 1.2.23

1. Vous devez vous assurer que sanitize.js est chargé. Par exemple, le charger à partir de https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js
2. vous devez inclure ngSanitize module sur votre app par exemple: var app = angular.module('myApp', ['ngSanitize']);
3. vous avez juste besoin de se lier avec ng-bind-html originaux html de contenu. Pas besoin de faire autre chose dans votre contrôleur. L'analyse et la conversion se fait automatiquement par l' ngBindHtml directive. (Lire l' How does it work section: $sce). Donc, dans votre cas <div ng-bind-html="preview_data.preview.embed.html"></div> pourraient faire le travail.

Answer 4

Pour moi, la plus simple et la plus flexible de la solution 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 de votre contrôleur de l'initialisation.

Answer 5

Vous pouvez créer vos propres dangereux html de liaison, bien sûr, si vous utilisez la saisie de l'utilisateur, il pourrait être un risque pour la sécurité.

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