javascript - 突出显示 pre 标签中的内容...... AngularJS 方式？

Question

我有一个简单的 AngularJS 应用程序，用于从数据库中提取文本日志数据记录并将其呈现在预标记中以保留格式。尝试在日志内容上添加一些带有额外标记的突出显示无法正确呈现。相反，我将标记作为纯文本添加到内容中。我做错了什么？示例:http://jsfiddle.net/afSsf/

HTML:

     <div ng-controller="MyCtrl">
          <pre>{{logdata}}</pre>
     </div>

JavaScript:

     var myApp = angular.module('myApp',[]);

     myApp.factory('Data', function() {
           var Data = {};
           Data.log = "ERROR - error message";
           Data.log = Data.log.replace(/ERROR/mg, '<span style="color:#f00">ERROR</span>')
           return Data;
     });

     function MyCtrl($scope, Data) {
          $scope.logdata = Data.log;
     }

结果:

     <span style="color:#f00">ERROR</span> - error message

Answer 1

您可以使用 ng-bind-html-unsafe 指令来绑定(bind) html 数据。看到这个 fiddle http://jsfiddle.net/cmyworld/8W2xm/

在最新的 Angular 版本中有 ng-bind-html