AngularJSとサニタイズ - ngBind指令なしのサニタイズHTML

Question

我々はHTML文字列をサニタイズする必要があると私たちは例えば、NG-バインドHTMLディレクティブを使用することはできませんsuposeます：

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

我々は、特別な文字を持っている場合をcustomer.nameこの行はéのようなhtml版として印刷され、代わりにéが必要です。このHTMLを "翻訳" することができます

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

しかし、何も：

私がテストしています。これはどうやってできますか？

簡潔な説明は、指示文内でhtmlをどのように消毒するかです（本体にはng-bind-htmlではありません）。 oficial documentationから

Answer 1

：

ngBindHtmlは$ sce.parseAsHtml（バインディング式）を使用しています。ここでは、実際のコード（やや簡略化）があります：

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

ので、私はあなたが必要とするすべての$sce.parseAsHtml（https://docs.angularjs.org/api/ng/service/$sce#parseAsHtml）だと思います。

---

とにかくHTMLを印刷するように角度を説得することができない場合は、あなたはあなたがここにいくつかの基本的なコードを見つけることができます

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

を使用しようとすることができます：http://www.javascripter.net/faq/accentedcharacters.htm

動作するはずですが、間違いなく最適なソリューションではありません。常にng-bind-htmlを使用してください。

Answer 2

複雑である必要はありません。

代わりに、要素にはsetAttributeとtextContent（V.S. innerHTML）を使用してください。ブラウザ自体は、あなたのために念入りに処理します。

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

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

詳細については、the post hereを参照してください。これらはもちろん1回限りのバインディングなので、アップデートが必要な場合は、ちょうど$watchを投げてください。