Czy można utworzyć fragment HTML w kontrolerze AngularJS i wyświetlić ten HTML w widoku?
Wynika to z konieczności przekształcenia niespójnego obiektu blob JSON w zagnieżdżoną listę id: value
par. Dlatego HTML jest tworzony w kontrolerze i teraz chcę go wyświetlić.
Utworzyłem właściwość modelu, ale nie mogę tego renderować w widoku bez drukowania tylko kodu HTML .
Aktualizacja
Wygląda na to, że problem wynika z kątowego renderowania utworzonego HTML jako ciąg znaków w cudzysłowie. Spróbuję znaleźć sposób na obejście tego.
Przykładowy kontroler:
var SomeController = function () {
this.customHtml = '<ul><li>render me please</li></ul>';
}
Przykładowy widok:
<div ng:bind="customHtml"></div>
Daje:
<div>
"<ul><li>render me please</li></ul>"
</div>
function htmlSanitizer(html) {...
. Angular dev zdecydował, że powinieneś być w stanie znaleźć powiązanie HTML, powoli przeglądając wszystkie ukryte elementy stron jeden po drugim, aby znaleźć JEDEN POJEDYNCZY brakujący fragment HTML. !!! bardzo zły na takie założenie !!!Odpowiedzi:
W przypadku Angulara 1.x użyj
ng-bind-html
w HTML:W tym momencie pojawi się
attempting to use an unsafe value in a safe context
błąd, więc musisz użyć ngSanitize lub $ sce, aby rozwiązać ten problem.$ sce
Użyj
$sce.trustAsHtml()
w kontrolerze, aby przekonwertować ciąg HTML.ngSanitize
Istnieją 2 kroki:
obejmują zasób angular-sanitize.min.js, tj .:
<script src="lib/angular/angular-sanitize.min.js"></script>
W pliku js (kontroler lub zwykle app.js) dołącz ngSanitize, tj .:
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])
źródło
ng-bind-html-unsafe
usunięto i połączono dwie dyrektywy. Zobacz: github.com/angular/angular.js/blob/master/…$sce
. Wciśnij go do kontrolera i prześlij przez niego html.$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);
W przeciwnym razie ciągle dostawałemattempting to use an unsafe value in a safe context
Możesz także utworzyć taki filtr:
Następnie w widoku
Uwaga : Ten filtr ufa każdemu przekazanemu do niego plikowi HTML i może stanowić lukę w zabezpieczeniach XSS, jeśli zostaną przekazane do niego zmienne z danymi wejściowymi użytkownika.
źródło
ngResource
Zależność BTW nie jest konieczna.sanitize
? Jest to tak mylące, że w rzeczywistości niczego nie dezynfekuje. Zamiast tego powinno się nazywaćtrust
,trustSafe
lub coś podobnego.rawHtml
to moje imię do filtra zamiastsanitize
.Angular JS pokazuje HTML w znaczniku
Rozwiązanie podane w powyższym linku działało dla mnie, żadna z opcji w tym wątku nie działała. Dla każdego, kto szuka tego samego w AngularJS w wersji 1.2.9
Oto kopia:
EDYTOWAĆ:
Oto konfiguracja:
Plik JS:
Plik HTML:
źródło
Na szczęście nie potrzebujesz żadnych wymyślnych filtrów ani niebezpiecznych metod, aby uniknąć tego komunikatu o błędzie. Jest to kompletna implementacja umożliwiająca prawidłowe wyświetlanie znaczników HTML w widoku w zamierzony i bezpieczny sposób.
Moduł odkażający musi być dołączony po Angular:
Następnie moduł musi zostać załadowany:
Umożliwi to dołączenie znaczników do ciągu z kontrolera, dyrektywy itp .:
Wreszcie w szablonie należy go wyprowadzić w następujący sposób:
Co da oczekiwany wynik: 42 to odpowiedź .
źródło
<div><label>Why My Input Element Missing</label><input /></div>
... Jeśli to cię zaskakuje, to zaktualizuj swoją odpowiedź plz .. Ponieważ przetestowałem wszystkie rozwiązania głosowania 10+. Twoje rozwiązanie nie działało, żeby zobaczyć moje tagi wejściowe .. w przeciwnym razie dobrze ... użyłem$sce.trustAsHtml(html)
Próbowałem dzisiaj, jedynym sposobem, jaki znalazłem, było to
<div ng-bind-html-unsafe="expression"></div>
źródło
ng-bind-html-unsafe
nie działa.To jest najkrótsza droga:
Utwórz filtr:
I twoim zdaniem:
PS Ta metoda nie wymaga dołączania
ngSanitize
modułu.źródło
$sce
w zaakceptowanej odpowiedzi nie działało dla mnie i nie chciałem uwzględniać dodatkowej zależności dla czegoś tak trywialnego.na HTML
LUB
na kontrolerze
współpracuje również z
$scope.comment.msg = $sce.trustAsHtml(html);
źródło
$sce
jest schludny, ale czy użytkownik nie może po prostu dodać tutaj punktu przerwania i przywrócić szkodliwy kod dothis.myCtrl.comment.msg
korzystania z debugera?ng-bind-html
rozbiera.Odkryłem, że użycie ng-sanitize nie pozwoliło mi dodać kliknięcia ng w pliku HTML.
Aby rozwiązać ten problem, dodałem dyrektywę. Lubię to:
A to jest HTML:
Powodzenia.
źródło
Właśnie to zrobiłem, używając ngBindHtml, postępując zgodnie z dokumentacją kątową (v1.4) ,
Upewnij się, że umieściłeś ngSanitize w zależnościach modułu. To powinno działać dobrze.
źródło
Innym rozwiązaniem, bardzo podobnym do blrbr's, z wyjątkiem używania atrybutu o zasięgu, jest:
I wtedy
Uwaga można zastąpić
element.append()
zelement.replaceWith()
źródło
istnieje jeszcze jedno rozwiązanie tego problemu, polegające na utworzeniu nowego atrybutu lub dyrektyw w formie kątowej.
product-specs.html
app.js
index.html
lub
lub
https://docs.angularjs.org/guide/directive
źródło
możesz także użyć ng-include .
możesz użyć „ng-show”, aby pokazać ukrywanie danych tego szablonu.
źródło
oto rozwiązanie zrób taki filtr
i zastosuj to jako filtr do ng-bind-html like
i dziękuję Rubenowi Decropowi
źródło
Posługiwać się
i
W tym celu musisz
angular-sanitize.js
na przykład dołączyć do pliku HTML plikźródło
Oto prosta (i niebezpieczna)
bind-as-html
dyrektywa, bez potrzebyngSanitize
:Pamiętaj, że spowoduje to problemy związane z bezpieczeństwem, jeśli powiążą niezaufane treści.
Użyj tak:
źródło
Przykład roboczy z potokiem do wyświetlania html w szablonie z Angular 4.
1.Ocena rur Escape-html.pipe.ts
`
`2. Zarejestruj potok do app.module.ts
Użyj w swoim szablonie
getDivHtml() { //can return html as per requirement}
Dodaj odpowiednią implementację dla getDivHtml w powiązanym pliku component.ts.
źródło
Po prostu proste użycie
[innerHTML]
, jak poniżej:Zanim będziesz musiał użyć
ng-bind-html
...źródło
W Angular 7 + ionic 4 zawartość HTML można wyświetlić za pomocą „[innerHTML]”:
Mam nadzieję, że ci to pomoże. Dzięki.
źródło