Angularjs ng-bindが正規表現で動作していませんか？

Question

基本的には、Angularjs ng-bindを使用して区切られた|をスタイルしようとしていますが、そのスタイルを適用していないとspanタグを文字列に追加しています。 AngularJsを使用してこのタスクを達成する正しい方法は何ですか？

main.htmlを

<li ng-repeat="message in event.data track by $index"> 
         <span class="messageMargin" ng-bind="messageTest">{{message.value}}</span> 
</li> 

ctrl.js

var data = "[2017-07-12T12:38:36-04:00]|zds455|info|<n/a>|[infra.actorRouter] Processing message from topic UEQ: 216014da-b849-4a1d-8232-3629e58338ce { partition: 0, offset: 12081530 }" 

$scope.messageTest = data.replace(/\|/g, '<span class="pipe">|</span>'); 

のmain.css

.pipe { 
    background: red; 
    width: 1em; 
    color: white; 
    display: inline-block; 
    text-align: center; 
} 

Answer 1

ではなくng-bind-htmlを使用しようとするが、最初の依存関係をモジュールに$sanitizeを追加することを忘れないでください。

ng-bindを使用すると、すべてのhtmlタグが無視されます。 ng-bind-htmlを使用すると、安全でない場合があることを覚えておいてください（たとえば、ユーザーがその変数にアクセスできるようにすると悪意のあるコードを挿入する可能性があります）。

正規表現は何もありません。クラシックng-bindで許可されていないhtmlタグを挿入しようとします。