突出显示 pre 标签中的内容……AngularJS 的方式？答案

【问题标题】：Highlighting the content in pre tag... the AngularJS way?突出显示 pre 标签中的内容……AngularJS 的方式？
【发布时间】：2013-08-29 10:06:37
【问题描述】：

我有一个简单的 AngularJS 应用程序，可以从数据库中提取文本日志数据记录，并将其呈现在 pre 标记中以保留格式。尝试在日志内容上添加一些带有额外标记的突出显示无法正确呈现。相反，我将标记添加为内容中的纯文本。我做错了什么？示例：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

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案1】：

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

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

【讨论】：

+1 表示 ng-bind-html-unsafe。这是一个小提琴http://jsfiddle.net/afSsf/1/