Angularjs ng-bind 不适用于正则表达式？答案

【问题标题】：Angularjs ng-bind is not working with regex?Angularjs ng-bind 不适用于正则表达式？
【发布时间】：2017-12-18 12:10:09
【问题描述】：

基本上我正在尝试使用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;
}

【问题讨论】：

标签： html css angularjs angularjs-directive angularjs-scope

【解决方案1】：

尝试改用ng-bind-html，但记得先将$sanitize添加到模块依赖项中。

当您使用 ng-bind 时，角度会忽略所有 html 标记。请记住，使用 ng-bind-html 有时可能不安全（例如，如果用户可以访问该变量，他可以注入恶意代码）

Regex 与这里无关。您只需尝试插入经典 ng-bind 中不允许的 html 标签。

【讨论】：

它可以工作，但是我的浏览器崩溃了我有日志的实时流
控制台没有错误我的浏览器冻结无法执行任何操作
尝试从 span 中删除 {{message.value}}。使用 ng-bind 时无论如何都不应该使用它。
分配给 event.data 的内容是什么？也许你那里的数据太多