AngularJS正则表达式过滤器语法荧光笔

Question

请看一下这个 plunker： http://plnkr.co/edit/OIFu07GS0ZJQOdmpDnXB?p=preview

我正在尝试使用角度创建语法突出显示器。 我的过滤器工作了 80%。 正则表达式是正确的，但 .replace（） 它将 html "写入"为预文本，而不是将其呈现为 html。

看一看，你就会明白我想做什么。

我知道有代码镜像和 ace 指令，但它们对于我需要的东西来说太大了。

有人知道如何解决它吗？

正确的输出应该是这样的：

<pre>
    <span class="string">1</span>
    <span class="string">2</span>
    <span class="string">3</span> 
    #This is a mysql syntax highlighter
    -- This is a comment/*
    And this is a multi line comment
    SELECT things FROM table;*/
</pre>

目前，pre 之间的所有内容都呈现为文本。

有什么想法吗？感谢

Answer 1

我认为你不能用过滤器做到这一点，试试指令。

下面是一个相当简单的例子。我首先将过滤器更改为服务（尽管如果您愿意，您可以与$filter类似地使用过滤器，但我不明白为什么）。然后我使用 $interpolate 创建一个插值函数，如下所述：

将带有标记的字符串编译为插值函数。HTML $compile服务使用此服务进行数据绑定。有关配置插值标记的信息，请参阅$interpolateProvider。

您可以在示例中看到字符串'1'、'2' 和 '3' 被突出显示，因为我添加了 style="color:red" ，并且它们也有类。

编辑：使用ngModelController编辑解决方案，使对文本区域的更改出现在下面的元素中，并带有Angular的数据绑定。请注意对代码段元素的更改：<snippet ng-model="txt">

---

var app = angular.module('plunker', ['syntax']);
app.controller('MainCtrl', function($scope) {
  $scope.txt = "1 2 3 n #This is a mysql syntax highlightern-- This is a comment/*nAnd this is a multi line commentnSELECT things FROM table;*/nSELECT nag.name AS agent, `d.date`, d.first_payment_date, d.account_number, ";
});

angular.module('syntax', [])
  .service('formatter', function () {
    return function (input) {
      if (input) {
        return input.replace(/(d+)/g, "<span class="string" style="color:red">$1</span>");
      }
    }
})
.directive('snippet', function($timeout, $interpolate, formatter) {
    return {
        restrict: 'E',
        template:'<pre><code></code></pre>',
        replace:true,
        require: '?ngModel',
        link:function(scope, elm, attrs, ngModel){ 
          ngModel.$render = function(){
            var tmp =  $interpolate(scope.txt)(scope);
            elm.find('code').html(formatter(tmp)); 
          }
        }
    };
}); 

http://plnkr.co/edit/783ML4Y2qH8oMLarf0kg?p=preview