Po usunięciu ng-bind-html-unsafe, jak wstrzyknąć HTML?

Próbuję użyć $sanitizedostawcy i ng-bind-htm-unsafedyrektywy, aby umożliwić mojemu kontrolerowi wstrzykiwanie HTML do DIV.

Nie mogę go jednak uruchomić.

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

Odkryłem, że dzieje się tak, ponieważ został usunięty z AngularJS (dzięki).

Ale bez ng-bind-html-unsafetego pojawia się ten błąd:

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

1. Musisz się upewnić, że plik sanitize.js jest załadowany. Na przykład załaduj go z https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION]/angular-sanitize.min.js
2. musisz dołączyć ngSanitizemoduł na app np .:var app = angular.module('myApp', ['ngSanitize']);
3. wystarczy powiązać z ng-bind-htmloryginalną htmltreścią. Nie musisz nic więcej robić w kontrolerze. Analiza i konwersja są wykonywane automatycznie przez ngBindHtmldyrektywę. (Przeczytaj How does it worksekcję na ten temat: $ sce ). Więc w twoim przypadku <div ng-bind-html="preview_data.preview.embed.html"></div>wykona pracę.

Zamiast deklarować funkcję w swoim zakresie, jak sugeruje Alex, możesz przekonwertować ją na prosty filtr:

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

Następnie możesz użyć tego w następujący sposób:

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

A oto działający przykład: http://jsfiddle.net/leeroy/6j4Lg/1/

Wskazałeś, że używasz Angulara 1.2.0 ... ponieważ jeden z pozostałych wskazanych komentarzy ng-bind-html-unsafezostał wycofany.

Zamiast tego będziesz chciał zrobić coś takiego:

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

Wstrzyknij $sceusługę do kontrolera i oznacz HTML jako „zaufany”:

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

Pamiętaj, że będziesz chciał używać wersji 1.2.0-rc3 lub nowszej. (Naprawiono błąd w rc3, który uniemożliwiał „obserwatorom” poprawne działanie na zaufanym HTML.)

Dla mnie najprostszym i najbardziej elastycznym rozwiązaniem jest:

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

I dodaj funkcję do kontrolera:

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

Nie zapomnij dodać $scedo inicjalizacji kontrolera.

Moim zdaniem najlepszym rozwiązaniem tego jest:

1. Utwórz niestandardowy filtr, który może znajdować się na przykład w pliku common.module.js - używany w Twojej aplikacji:

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

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

Teraz - nie rozumiem, dlaczego dyrektywa ng-bind-htmltego nie robitrustAsHtml wchodzi w skład jej funkcji - wydaje mi się trochę głupia, że ​​tak nie jest

W każdym razie - w ten sposób to robię - 67% czasu, to działa zawsze.

Możesz utworzyć własne proste niebezpieczne wiązanie HTML, oczywiście jeśli użyjesz danych wprowadzonych przez użytkownika, może to stanowić zagrożenie bezpieczeństwa.

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

Nie musisz używać {{}} w ng-bind-html-unsafe:

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

Oto przykład: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

Operator {{}} jest w zasadzie tylko skrótem dla ng-bind, więc to, czego próbujesz, sprowadza się do wiązania wewnątrz wiązania, które nie działa.

Miałem podobny problem. Nadal nie mogłem pobrać treści z moich plików obniżki cen przechowywanych na github.

Po skonfigurowaniu białej listy (z dodaną domeną github) w $ sceDelegateProvider w app.js działało to jak urok.

Opis: używanie białej listy zamiast pakowania jako zaufanego, jeśli ładujesz zawartość z innych adresów URL.

Dokumenty: $ sceDelegateProvider i ngInclude (do pobierania, kompilowania i dołączania zewnętrznego fragmentu HTML)

Ścisłe przeskakiwanie kontekstowe można całkowicie wyłączyć, umożliwiając wstrzykiwanie html przy użyciu ng-html-bind. Jest to niebezpieczna opcja, ale pomocna podczas testowania.

Przykład z dokumentacji AngularJS na temat$sce :

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

Dołączenie powyższej sekcji konfiguracji do aplikacji pozwoli ci wstrzyknąć HTML do ng-html-bind, ale jak zauważa dokument:

SCE zapewnia wiele korzyści związanych z bezpieczeństwem przy niewielkim nakładzie kodowania. Znacznie trudniej będzie wziąć wyłączoną aplikację SCE i zabezpieczyć ją samodzielnie lub włączyć SCE na późniejszym etapie. Sensowne może być wyłączenie SCE w przypadkach, gdy masz dużo istniejącego kodu, który został napisany przed wprowadzeniem SCE i migrujesz je jednocześnie moduł.

Możesz użyć takiego filtra

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

stosowanie

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

może być użyty do innych typów zasobów, na przykład link źródłowy dla ramek iframe i innych typów zadeklarowanych tutaj