AngularJS und Desinfizieren - Sanitize HTML ohne ngBind Richtlinie

Question

Lets nehme an brauchen wir eine HTML-Zeichenfolge sanieren, und wir können nicht ng-bind-html-Richtlinie verwenden, zum Beispiel:

<span data-toggle="tooltip" title="Edit {{customer.name}}">Text</span> 

Wenn wir Sonderzeichen in customer.name Diese Zeile würde als HTML-Version wie é gedruckt werden und wir möchten stattdessen é.

Ich habe getestet mit:

• $sce.trustAsHtml(customer.name)
• $sce.parseAsHtml(customer.name)

Aber nichts kann diesen HTML "übersetzen". Wie kann das gemacht werden?

Eine kurze Erklärung wäre: wie html in einer Direktive (nicht im Körper mit ng-bind-html) hygienisiert werden.

Answer 1

Aus oficial documentation:

ngBindHtml verwendet $ sce.parseAsHtml (Bindungsausdruck). Hier ist der eigentliche Code (etwas vereinfacht):

var ngBindHtmlDirective = ['$sce', function($sce) { 
    return function(scope, element, attr) { 
    scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) { 
     element.html(value || ''); 
    }); 
    }; 
}]; 

so glaube ich, alles, was Sie brauchen, ist $sce.parseAsHtml (https://docs.angularjs.org/api/ng/service/$sce#parseAsHtml).

---

Wenn Sie nicht in der Lage sind kantig zu überzeugen HTML sowieso zu drucken, können Sie versuchen,

customer.name.replace(/é/g, String.fromCharCode(233)); 

Sie verwenden können einige grundlegende Codes finden Sie hier: http://www.javascripter.net/faq/accentedcharacters.htm

Das sollte funktionieren, aber es ist definitiv nicht die beste Lösung. Sie sollten immer ng-bind-html verwenden.

Answer 2

Es muss nicht so kompliziert sein.

Verwenden Sie stattdessen setAttribute und textContent (V.S. innerHTML) für Elemente, und Browser selbst kümmern sich um die Bereinigung für Sie.

// To set element attributes 
$span.setAttribute("title", "Edit" + customer.name); 

// To set element content 
$span.textContent = customer.name; 

Weitere Einzelheiten finden Sie unter the post here. Dies sind natürlich einmalige Bindungen. Wenn Sie also Updates benötigen, werfen Sie einfach $watch in die Mitte.