Com o ng-bind-html-unsafe removido, como injeto HTML?

Estou tentando usar o $sanitizeprovedor e a ng-bind-htm-unsafediretiva para permitir que meu controlador injete HTML em um DIV.

No entanto, não consigo fazê-lo funcionar.

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

Eu descobri que é porque foi removido do AngularJS (obrigado).

Mas sem ng-bind-html-unsafe, eu recebo este erro:

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

1. Você precisa garantir que o sanitize.js esteja carregado. Por exemplo, carregue-o em https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION}/angular-sanitize.min.js
2. você precisa incluir o ngSanitizemódulo no seu app exemplo:var app = angular.module('myApp', ['ngSanitize']);
3. você só precisa vincular com ng-bind-htmlo htmlconteúdo original . Não há necessidade de fazer mais nada no seu controlador. A análise e conversão são feitas automaticamente pela ngBindHtmldiretiva. (Leia a How does it workseção sobre isso: $ sce ). Então, no seu caso <div ng-bind-html="preview_data.preview.embed.html"></div>, faria o trabalho.

Em vez de declarar uma função no seu escopo, conforme sugerido por Alex, você pode convertê-la em um filtro simples:

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

Então você pode usá-lo assim:

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

E aqui está um exemplo de trabalho: http://jsfiddle.net/leeroy/6j4Lg/1/

Você indicou que está usando o Angular 1.2.0 ... como um dos outros comentários indicados, ng-bind-html-unsafefoi preterido.

Em vez disso, você deve fazer algo assim:

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

No seu controlador, injete o $sceserviço e marque o HTML como "confiável":

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

Observe que você deseja usar o 1.2.0-rc3 ou mais recente. (Eles corrigiram um bug no rc3 que impedia que "observadores" funcionassem corretamente em HTML confiável.)

Para mim, a solução mais simples e flexível é:

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

E adicione função ao seu controlador:

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

Não se esqueça de adicionar $sceà inicialização do seu controlador.

A melhor solução para isso, na minha opinião, é esta:

1. Crie um filtro personalizado que possa estar em um arquivo common.module.js, por exemplo - usado em seu aplicativo:

   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:

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

Agora - não vejo por que a diretiva ng-bind-htmlnão faz trustAsHtmlparte de sua função - me parece um pouco tolo que não

Enfim - é assim que eu faço - 67% das vezes, funciona sempre.

Você pode criar sua própria ligação html insegura simples, é claro, se você usar a entrada do usuário, isso pode ser um risco à segurança.

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

Você não precisa usar {{}} dentro do ng-bind-html-unsafe:

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

Aqui está um exemplo: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

O operador {{}} é essencialmente apenas uma abreviação para ng-bind, então o que você estava tentando equivale a uma ligação dentro de uma ligação, o que não funciona.

Eu tive um problema semelhante. Ainda não foi possível obter o conteúdo dos meus arquivos de remarcação hospedados no github.

Depois de configurar uma lista de permissões (com o domínio github adicionado) no $ sceDelegateProvider no app.js, funcionou como um encanto.

Descrição: use uma lista de permissões em vez de agrupar como confiável se você carregar conteúdo de URLs diferentes.

Docs: $ sceDelegateProvider e ngInclude (para buscar, compilar e incluir fragmento HTML externo)

O escape contextual estrito pode ser totalmente desativado, permitindo que você injete html usando ng-html-bind. Essa é uma opção insegura, mas útil ao testar.

Exemplo da documentação$sce do AngularJS sobre :

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

Anexar a seção de configuração acima ao seu aplicativo permitirá que você injete html ng-html-bind, mas como o documento observa:

O SCE oferece muitos benefícios de segurança por pouca sobrecarga de codificação. Será muito mais difícil usar um aplicativo desativado do SCE e protegê-lo por conta própria ou habilitar o SCE posteriormente. Pode fazer sentido desabilitar o SCE nos casos em que você tem muito código existente que foi gravado antes da introdução do SCE e você está migrando um módulo por vez.

Você pode usar 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

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

pode ser usado para outros tipos de recursos, por exemplo, link de origem para iframes e outros tipos declarados aqui